摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax實(shí)現(xiàn)三級(jí)級(jí)聯(lián)動(dòng)</t
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax實(shí)現(xiàn)三級(jí)級(jí)聯(lián)動(dòng)</title>
</head>
<body>
?。?lt;select name="" id="pro"></select>
市：<select name="" id="city"></select>
區(qū)縣：<select name="" id="area"></select>
<!--<p><span id="addr1"></span ><span id="addr2"></span><span id="addr3"></span></p>-->
<p id="addr"></p>
<script src="lib/jquery-3.3.1.min.js"></script>
<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)前選擇的省的名稱
// $('#addr1').html($(this).find(':selected').text());
$('#addr').html($(this).find(':selected').text());
$.getJSON('inc/2.json',function(data){
// console.log(data);
let option='<option value="">選擇(市)</option>';
$.each(data,function (i) {
if(data[i].proId == $('#pro').val()){
option+='<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>'
}});
// console.log(option);
$('#city').html(option);
});
});
$('#city').change(function () {
console.log($(this).find(':selected').text());//查看當(dāng)前選擇的市的名稱
// $('#addr2').html($(this).find(':selected').text());
$('#addr').html($('#pro').find(':selected').text()+$(this).find(':selected').text());
$.getJSON('inc/3.json',function(data){
// console.log(data);
let option='<option value="">選擇(縣區(qū))</option>';
$.each(data,function (i) {
if(data[i].cityId == $('#city').val()){
option+='<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>'
}
});
// console.log(option);
$('#area').html(option);
});
})
$('#area').change(function () {
console.log($(this).find(':selected').text());//查看當(dāng)前選擇的縣區(qū)的名稱
// $('#addr3').html($(this).find(':selected').text());
$('#addr').html($('#pro').find(':selected').text()+$('#city').find(':selected').text()+$(this).find(':selected').text());
});
})
</script>
</body>
</html>[
{
"proId":1,
"proName":"安徽"
},
{
"proId":2,
"proName":"江蘇"
}
][
{
"cityId":1,
"cityName":"合肥",
"proId":1
},
{
"cityId":2,
"cityName":"蕪湖",
"proId":1
},
{
"cityId":3,
"cityName":"南京",
"proId":2
},
{
"cityId":4,
"cityName":"蘇州",
"proId":2
}
][
{
"areaId":1,
"areaName":"包河區(qū)",
"cityId":1
},
{
"areaId":2,
"areaName":"蜀山區(qū)",
"cityId":1
},
{
"areaId":1,
"areaName":"玄武區(qū)",
"cityId":3
},
{
"areaId":2,
"areaName":"昆山市",
"cityId":3
},
{
"areaId":1,
"areaName":"鏡湖區(qū)",
"cityId":2
},
{
"areaId":2,
"areaName":"弋江區(qū)",
"cityId":2
},
{
"areaId":1,
"areaName":"虎丘區(qū)",
"cityId":4
},
{
"areaId":2,
"areaName":"吳中區(qū)",
"cityId":4
}
]ajax實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)實(shí)現(xiàn)比在html里直接寫方便多了，只要修改三個(gè)JSON文件就可以，傳輸方式用的是$.getJSON(),里面是地址和函數(shù)，實(shí)現(xiàn)頁面實(shí)時(shí)顯示我想了2種方法，1.是在html中加入3個(gè)span標(biāo)簽，寫3個(gè)分別進(jìn)行地址的輸出，2.是在ajax代碼中使用+連接符進(jìn)行連接輸出 
批改老師：韋小寶批改時(shí)間：2018-12-26 09:55:46
老師總結(jié)：不錯(cuò)不錯(cuò)！寫的很棒！也很有想法！課后記得多練習(xí)哦！