摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三級聯(lián)動菜單</title>
</head>
<body>
<label for="dz">您選擇的是：<input type="text" id="dz"></label><br>
省<select id="selProvince" style="width:110px;"> </select>
市<select id="selCity" style="width:110px;">
<option value="0">--請選擇城市--</option>
</select>
區(qū)縣<select id="selDistrict" style="widows: 120px;">
<option value="0">--請選擇區(qū)/縣--</option>
</select>
<script src="jq_3.3.1_mi.js"></script>
<script>
$(function(){
$.getJSON('pro.json',function(data){
let option='<option value="0">--請選擇省份--</option>'
$.each(data,function(i){
option+='<option value="'+data[i].ProID+'">'+data[i].ProName+'</option>'
})
$('#selProvince').html(option)
})
$('#selProvince').change(function(){
$.getJSON('city.json',function(data){
let option='<option value="0">--請選擇城市--</option>'
$.each(data,function(i){
if(data[i].ProID==$('#selProvince').val()){
option+='<option value="'+data[i].CityID+'">'+data[i].CityName+'</option>'}
})
$('#selCity').html(option)
})
console.log($('#selProvince option:selected').text())
$('#dz').val($('#selProvince option:selected').text())
})
$('#selCity').change(function(){
$.getJSON('area.json',function(data){
let option='<option value="0">--請選擇區(qū)縣--</option>'
$.each(data,function(i){
if(data[i].CityID==$('#selCity').val()){
option+='<option value="'+data[i].ID+'">'+data[i].DisName+'</option>'}
})
$('#selDistrict').html(option)
})
$('#dz').val($('#selProvince option:selected').text()+" "+$('#selCity option:selected').text())
})
$('#selDistrict').change(function(){
$('#dz').val($('#selProvince option:selected').text()+" "+$('#selCity option:selected').text()+" "+$('#selDistrict option:selected').text())
})
})
//數(shù)組下標(biāo)[],$('#selProvince').val()，$('#selProvince option:selected').text()
//三級聯(lián)動菜單，練習(xí)應(yīng)用函數(shù)$.getJSON(url,function(data){})，$.each(data,function(i){})
</script>
</body>
</html>
批改老師：天蓬老師批改時間：2019-02-18 17:22:33
老師總結(jié)：each() 其實是原生的forEach(), 這個案例的重點就是onchange事件, 理解它的用途