三级联动菜单jquery动态获取JSON数据
<!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>三级联动菜单</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>
区县<select id="selDistrict" style="widows: 120px;">
<option value="0">--请选择区/县--</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">--请选择区县--</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())
})
})
//数组下标[],$('#selProvince').val()，$('#selProvince option:selected').text()
//三级联动菜单，练习应用函数$.getJSON(url,function(data){})，$.each(data,function(i){})
</script>
</body>
</html>
