本文章适用于新手，老手自便
先看源码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script><!--jq包-->
<script type="text/javascript" src="js/cityjson.js"></script><!--数据源文件-->
<script type="text/javascript">
$(document).ready(function(){
//操作DOM，加载数据到下拉列表 foreach
$.each(data,function(index,item){ //循环data数据中每一个
$("#province").append("<option value="+index+">"+item.name+"</option>");
});
//点击不同的省，加载市
$("#province").bind("change",function(){
//得到哪个省被点击
var province = $(this).val();//得到当前省份
var city = data[province].child;//得到当前省份的所有城市
//加载该省的数据
$("#city").empty();//重新选择省时候清空城市列表
$("#area").empty();//重新选择省时候清空区列表
$("#city").append("<option>请选择</option>");
$.each(city,function(index2,item){
$("#city").append("<option value="+index2+">"+item.name+"</option>");
});
});
$("#city").bind("change",function(){
$("#area").empty();//重新选择城市时候清空区列表
$("#area").append("<option>请选择</option>");
var province = $("#province").val(); //得到当前省
var citynum = $(this).val();//得到当前城市
var are = data[province].child[citynum].child; //得到当前城市所对应的城区
$.each(are,function(index3,item){
$("#area").append("<option value="+index3+">"+item+"</option>");
});
});
});
</script>
</head>
<body>
省：<select id="province"><option>请选择</option></select>
市：<select id="city"></select>
区：<select id="area"></select>
</body>
</html>
这里是浏览器的效果图：
再来看一下数据的代码片段：
var data =
{
"110000": {
"name": "北京市",
"child": {
"110100": {
"name": "市辖区",
"child": {
"110101": "东城区",
"110102": "西城区",
"110105": "朝阳区",
"110106": "丰台区",
"110107": "石景山区",
"110108": "海淀区",
"110109": "门头沟区",
"110111": "房山区",
"110112": "通州区",
"110113": "顺义区",
"110114": "昌平区",
"110115": "大兴区",
"110116": "怀柔区",
"110117": "平谷区",
"110118": "密云区",
"110119": "延庆区"
}
}
}
},
"120000": {
"name": "天津市",
"child": {
"120100": {
"name": "市辖区",
"child": {
"120101": "和平区",
"120102": "河东区",
"120103": "河西区",
"120104": "南开区",
"120105": "河北区",
"120106": "红桥区",
"120110": "东丽区",
"120111": "西青区",
"120112": "津南区",
"120113": "北辰区",
"120114": "武清区",
"120115": "宝坻区",
"120116": "滨海新区",
"120117": "宁河区",
"120118": "静海区",
"120119": "蓟州区"
}
}
}
},
因为数据是基于全国的省市区，这里没有全部展示，只展示部分片段
这里是浏览器控制台的效果图，方便查找结点
