摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三級(jí)聯(lián)動(dòng)菜單</title> <script src="js/jquery-3.3.1.min.js"></script
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三級(jí)聯(lián)動(dòng)菜單</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
省: <select name="" id="pro"></select>
市: <select name="" id="city"></select>
區(qū): <select name="" id="area"></select>
<p id="addr"></p>
<script>
$(function(){
$.getJSON('inc/1.json',function(data){
let option = '<option value="">請(qǐng)選擇省</option>'
// console.log(data)
$.each(data,function(i){
option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>'
});
$('#pro').html(option);
});
$('#pro').change(function(){
//查看選中元素內(nèi)容
console.log($(this).find(':selected').text());
$('#addr').html($(this).find(':selected').text());
$.getJSON('inc/2.json',function(data){
let option = '<option value="">請(qǐng)選擇市</option>'
$.each(data,function(i){
if(data[i].proId == $('#pro').val()){
option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>'
}
});
$('#city').html(option);
});
})
$('#city').change(function(){
//查看選中元素內(nèi)容
console.log($(this).find(':selected').text());
$('#addr').html($('#pro').find(':selected').text()+''+
$(this).find(':selected').text()
);
$.getJSON('inc/3.json',function(data){
let option = '<option value="">請(qǐng)選擇區(qū)</option>'
$.each(data,function(i){
if(data[i].cityId == $('#city').val()){
option += '<option value="'+data[i].areId+'">'+data[i].areaName+'</option>'
}
});
$('#area').html(option);
});
})
$('#area').change(function(){
console.log($(this).find(':selected').text());
$('#addr').html($('#pro').find(':selected').text()+''+
$('#city').find(':selected').text()+''+
$(this).find(':selected').text()
);
});
})
</script>
</body>
</html>
使用查找selected的text方式拼接顯示了。但是如果是那種級(jí)別比較多的，這種拼接方法代碼就很長了。
感覺自己定義變量，調(diào)用變量這塊不是很熟悉。有點(diǎn)把JQ和js的語法弄混，準(zhǔn)備練習(xí)下省市區(qū)在一個(gè)json文件里的三級(jí)聯(lián)動(dòng)。這個(gè)案例非常常用。
批改老師：天蓬老師批改時(shí)間：2019-01-05 14:42:53
老師總結(jié)：這里有個(gè)體驗(yàn)上的問題，用戶選擇安徽、合肥、包河區(qū)后，再次換個(gè)省：浙江，那么最后的區(qū)不會(huì)變，還是包河區(qū)。建議在選擇完省后，把后面的兩個(gè)select清一下