<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<select class="province">
<option>---选择省---</option>
</select>
<select class="city">
<option>---选择市---</option>
</select>
<select class="coding">
<option>---选择编码---</option>
</select>
</div>
</body>
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$.get("city.json",function(data,status){ //get获取数据
if (status) { //找到数据的时候执行
$.each(data.城市代码, function(i,el) { //遍历城市代码
var str = "<option>"+el.省+"</option>"; //找出省
$(".province").append(str); //添加到选择区
});
$(".province").change(function(){ //当省变动的时候
$(".city").html("<option>---选择市---</option>") //清除上一次选的城市
$(".coding").html("<option>---选择编码---</option>") //清除上一次选的编码
$(data.城市代码).each(function(i,el){
if ($(".province").val() == el.省) { //找到所选取的省 因为省和市的下标是一致的
$(el.市).each(function(index,ele){ //遍历所有找到的市
var str = "<option>"+ele.市名+"</option>" //找出市名
$(".city").append(str);
})
}
})
})
$(".city").change(function(){ //当市变动的时候
$(data.城市代码).each(function(i,el){
if ($(".province").val() == el.省) {
$(el.市).each(function(index,ele){
if ($(".city").val() == ele.市名){ //找到选取的市名
var str = "<option>"+ele.编码+"</option>" //编码跟市名同级
$(".coding").html(str); //替换编码的内容
}
})
}
})
})
}
})
</script>
</html>
