abstract：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>三級下拉菜單</title> <script src="jquery-3.3.1.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三級下拉菜單</title>
<script src="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 type="text/javascript">
$(function(){
let text1,text2,text3,span;
//選擇省的時(shí)候
//用$.getJSON('JSON數(shù)據(jù)的地址',function(data){})得到JSON數(shù)據(jù)
$.getJSON('1.json',function(data){
let option = '<option value="">選擇(省)</option>';
//遍歷JSON數(shù)據(jù)
$.each(data,function(i){
option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
});
//將遍歷后的JSON數(shù)據(jù)在頁面上顯示
$('#pro').html(option); /* document.getElementsByTagName().item(a).textContent;*/
}); //選擇市的時(shí)
//當(dāng)pro選擇發(fā)生變化的時(shí)候，此時(shí)用change()來設(shè)置
$('#pro').change(function(){
let a;
$.getJSON('2.json',function(data){
let option = '<option value="">選擇(市)</option>';
//遍歷JSON數(shù)據(jù)
$.each(data,function(i){ // console.log($('#pro').val());
if(data[i].proId == $('#pro').val()){
option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
a= data[i].proId;
}
});
//將遍歷后的JSON數(shù)據(jù)在頁面上顯示
$('#city').html(option);
//得到選擇以后的省名
$.getJSON('1.json',function(data){ $.each(data,function(i){
// console.log($('#pro').val());
if( data[i].proId==a){
text1= data[i].proName;
}
});
console.log(text1);
span ='<span>'+text1+'省'+'</span>';
$('#addr').html(span);
/* span='<span>'+ok+'</span>';
$('#addr').html(span);*/
}); });
}) //選擇縣的時(shí)候
//當(dāng)pro選擇發(fā)生變化的時(shí)候，此時(shí)用change()來設(shè)置
$('#city').change(function(){
let b; $.getJSON('3.json',function(data){ let option = '<option value="">選擇(縣)</option>';
//遍歷JSON數(shù)據(jù)
$.each(data,function(i){
// console.log($('#pro').val());
if(data[i].cityId == $('#city').val()){
option += '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
b=data[i].cityId;
}
});
//將遍歷后的JSON數(shù)據(jù)在頁面上顯示
$('#area').html(option);
//得到選擇以后的市名
$.getJSON('2.json',function(data){
$.each(data,function(i){
// console.log($('#pro').val());
if( data[i].cityId==b){
text2= data[i].cityName;
}
});
console.log(text2);
span ='<span>'+text1+'省'+text2+'市'+'</span>';
$('#addr').html(span);
}); });
}) $('#area').change(function(){
let c;
$.getJSON('4.json',function(data){
//遍歷JSON數(shù)據(jù)
$.each(data,function(i){
if(data[i].areaId == $('#area').val()){
c=data[i].areaId;
}
}); //得到選擇以后的縣名
$.getJSON('3.json',function(data){
$.each(data,function(i){
// console.log($('#pro').val());
if( data[i].areaId==c){
text3= data[i].areaName;
}
});
console.log(text3);
span ='<span>'+text1+'省'+text2+'市'+text3+'</span>';
$('#addr').html(span);
});
});
})
})
</script></body
</html>
Correcting teacher：韋小寶Correction time：2018-12-25 16:37:55
Teacher's summary：這方法很笨么？還好吧！你沒看課程源碼嘛？你先把這節(jié)課的代碼多敲幾遍！你再看看有沒有可以修改或改進(jìn)的地方！