????：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作業(yè):ajax實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)<
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作業(yè):ajax實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)</title>
<script type="text/javascript" src="inc/jquery-3.3.1.min.js"></script>
</head>
<body>
省:<select name="" id="pro"></select>
市:<select name="" id="city"></select>
縣:<select name="" id="area"></select>
<p id="show" style="font-size: 20px;font-weight: bold;"></p>
<script>
$(function () {
$.getJSON('inc/1.json',function(data){
// console.log(data);
let option='<option value="">選擇(省)</option>';
$.each(data,function(i){
option+='<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
})
//console.log(option);
$('#pro').html(option);
})
})
$('#pro').change(function(){
//console.log($(this).find(':selected').text());//查看當(dāng)前選中的的省名稱
$('#show').html($(this).find(':selected').text());
$('[value=""]').remove();
//console.log($(event.target).val());
$.getJSON('inc/2.json',function(data){
// console.log(data);
let option1='<option value="">選擇(市)</option>'
$.each(data,function(i){
if(data[i].proId==$('#pro').val()){
option1+='<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
}
})
//console.log(option1);
$('#city').html(option1);
})
})
$('#city').change(function(){
$('[value=""]').remove();
//console.log($(event.target).val());
$('#show').append($(this).find(':selected').text());
$.getJSON('inc/3.json',function(data){
//console.log(data);
let option2='<option value="">選擇(縣)</option>'
$.each(data,function(i){
if(data[i].cityId==$('#city').val()){
option2+='<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
}
})
//console.log(option1);
$('#area').html(option2);
})
})
$('#area').change(function(){
console.log($(this).find(':selected').text())
$('#show').append($(this).find(':selected').text());
$('[value=""]').remove();
})
</script>
</body>
</html>總結(jié)：通過這幾節(jié)課，學(xué)到了load()方法，$.get()、$.getJSON()、$.getScript、$.post()、$.ajax()函數(shù)的用法，實(shí)現(xiàn)了頁面的無刷新和跳轉(zhuǎn)更新，并且實(shí)現(xiàn)了課程當(dāng)中案例，更加鞏固了學(xué)到的知識(shí)。每天都有小小的進(jìn)步，很開心。
?? ???：韋小寶?? ??：2018-11-21 13:41:52
???? ??：嗯！寫的很不錯(cuò)！總結(jié)的也很到位！學(xué)習(xí)就是每天進(jìn)步一點(diǎn)點(diǎn)就可以了！還要即可多多復(fù)習(xí)和練習(xí)哦！