サマリー：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作業(yè)提示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作業(yè)提示: 三級(jí)聯(lián)動(dòng)菜單</title>
</head>
<body>
省 <select name="" id="pro"></select>
市 <select name="" id="city"></select>
區(qū) <select name="" id="area"></select>
<p id="addr"></p>
<script src="../static/jquery.js"></script>
<script>
$(function(){
$.getJSON('inc/1.json',function(data){
let option = '<option value="">選擇(省)</option>';
$.each(data,function(i){
option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
});
$('#pro').html(option);
});
$('#pro').change(function(){
//查看當(dāng)前選擇中元素內(nèi)容
console.log($(this).find(':selected').text());
$('#addr').html($(this).find(':selected').text());
$.getJSON('inc/2.json',function(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>';
}
});
$('#city').html(option);
});
});
$('#city').change(function(){
//查看當(dāng)前選擇中元素內(nèi)容
console.log($(this).find(':selected').text());
var a=$('#pro').find(':selected').text();
$('#addr').html(a+$(this).find(':selected').text());
$.getJSON('inc/3.json',function(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>';
}
});
$('#area').html(option);
});
});
$('#area').change(function(){
//查看當(dāng)前選擇中元素內(nèi)容
console.log($(this).find(':selected').text());
var a=$('#pro').find(':selected').text();
var b=$('#city').find(':selected').text();
$('#addr').html(a+b+$(this).find(':selected').text());
});
//思考: 如何將獲取到的內(nèi)容,及時(shí)的回顯到頁面中,動(dòng)態(tài)的提示用戶當(dāng)前的選擇內(nèi)容,實(shí)現(xiàn)數(shù)據(jù)綁定
})
</script>
</body>
</html>總結(jié)
1；用getJson獲取服務(wù)器上的json數(shù)據(jù)
2；分級(jí)拿到select里面，用option拼接
3：var a=$('#pro').find(':selected').text();用代碼找到選擇的那個(gè)地區(qū)
然后拼接到一起。動(dòng)態(tài)顯示到p標(biāo)簽里面。
不知道可以不可以聲明全局變量。因?yàn)橛兄貜?fù)代碼。
添削の先生：天蓬老師添削時(shí)間：2019-04-27 17:37:05
先生のまとめ：變量是為項(xiàng)目服務(wù)器, 盡管要盡可能避免聲明全局變量, 但是如果全局變量可以極大的簡化代碼, 不妨聲明一個(gè), 總之瀏覽器不差你這一個(gè)變量