abstract：project.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax實(shí)戰(zhàn)之省、市、區(qū)三級(jí)聯(lián)動(dòng)菜單</title> <script type="text/javascript&
project.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax實(shí)戰(zhàn)之省、市、區(qū)三級(jí)聯(lián)動(dòng)菜單</title>
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
</head>
<body>
省:<select name="" id="province"></select>
市:<select name="" id="city"></select>
區(qū):<select name="" id="area"></select>
<p id="attr"></p>
<script type="text/javascript">
$(function(){
$.getJSON('province.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>'
})
$('#province').html(option)
})
$('#province').change(function(){
console.log($(this).find(':selected').text()) //查看當(dāng)前選擇的省的名稱
$('#attr').html($(this).find(':selected').text())
$.getJSON('city.json',function(data){
let option = '<option value="">請選擇(市)</option>'
$.each(data,function(i){
if(data[i].proId==$('#province').val()){ //下一級(jí)省id必須和上一級(jí)省id相同
option+='<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>'
}
})
$('#city').html(option)
})
})
$('#city').change(function(){
console.log($(this).find(':selected').text()) //查看當(dāng)前選擇的市的名稱
$.getJSON('area.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(){
console.log($(this).find(':selected').text()) //查看當(dāng)前選擇的區(qū)的名稱
})
})
</script>
</body>
</html>
province.json:
[
{
"proId":1,
"proName":"安徽"
},
{
"proId":2,
"proName":"江蘇"
}
]
city.json:
[
{
"cityId":1,
"cityName":"合肥",
"proId":1
},
{
"cityId":2,
"cityName":"蕪湖",
"proId":1
},
{
"cityId":3,
"cityName":"南京",
"proId":2
},
{
"cityId":4,
"cityName":"蘇州",
"proId":2
}
]
area.json:
[
{
"areaId":1,
"areaName":"包河區(qū)",
"cityId":1
},
{
"areaId":2,
"areaName":"蜀山區(qū)",
"cityId":1
},
{
"areaId":3,
"areaName":"鏡湖區(qū)",
"cityId":2
},
{
"areaId":4,
"areaName":"弋江區(qū)",
"cityId":2
},
{
"areaId":5,
"areaName":"玄武區(qū)",
"cityId":3
},
{
"areaId":6,
"areaName":"六合區(qū)",
"cityId":3
},
{
"areaId":7,
"areaName":"昆山市",
"cityId":4
},
{
"areaId":8,
"areaName":"吳江區(qū)",
"cityId":4
}
]1. $.getJSON()函數(shù)專用于解析從服務(wù)器上返回的json格式的內(nèi)容
2. 其實(shí)它就是$.get()函數(shù)中,將返回?cái)?shù)據(jù)類型dataType設(shè)置為'json'格式時(shí)的簡寫函數(shù)
3. $.getJSON()需要讀取json格式的數(shù)據(jù),為簡化起見,直接創(chuàng)建一個(gè)json文件，實(shí)際開發(fā)中應(yīng)該從接口獲取
4. $.each() 專用來遍歷對(duì)象或者數(shù)組的全局函數(shù)
語法 ：$.each( object, callback )
Correcting teacher：滅絕師太Correction time：2019-01-08 09:17:46
Teacher's summary：完成的很好！作業(yè)代碼思路清晰，花了功夫的，繼續(xù)加油！