使用js实现省市县三级联动效果如下:
代码如下:
<body>
省:<select id="province"></select>
市:<slesct id="city"></select>
县:<select id="county"></select>
<scritp src="citys.js"></script>
<script>
//获取选择框
var _province=document.querySelector("#province");
var _city=document.querySelector("#city");
var _county=document.querySelector("#county");
//获取所有的省的数组
var provinces=citys.districts[0].districts;
//obj每个省对象
provinces.forEach(function(obj){
_province.innerHTML+=`<option value="${obj.adcode}">${obj.name}</option>`;
})
//发生改变时执行的函数,当改变省时,其后的也会改变成对应的地区
showCitys();
//切换省时,市和县都要切换
_province.onchange=function(){
showCitys();
showCounty();
}
//加载市
function showCitys(){
//每次都要重新清空框里的内容
_city.innerHTML="";
//获取当前所选的省的编码
var code=_province.value;
//根据编码获取对应的省的对象
var province=provinces.find(function(obj){
return obj.adcode==code;
})
//获取所有市的数组
var citys=province.districts;
//obj:每个市对象
citys.forEach(function(obj){
_city.innerHTML+=`<option value="${obj.adcode}">${obj.name}</option>`;
})
}
//发生改变时执行的函数,当改变省、市时,其后的也会改变成对应的地区
showCounty();
_city.onchange=function(){
showCounty();
}
//加载县
function showCounty(){
//每次都要重新清空框里的内容
_county.innerHTML="";
//获取当前所选的省的编码
var provinceCode=_province.value;
//获取当前所选的市的编码
var cityCode=_city.value;
//根据省编码获取相应的省的对象
var province=provinces.find(function(obj){
return obj.adcode==provinceCode;
})
//获取所有市的数组
var citys=province.districts;
//根据市编码获取相应的市对象
//obj:每一个市对象
var city=citys.find(function(obj){
return obj.adcode==cityCode;
})
//获取所有县的数组
var countys=city.districts;
//obj:每一个县对象
countys.forEach(function(obj){
_county.innerHTML+=`<option value="${obj.adcode}">${obj.name}</option>`;
})
}
</script>
</body>
因引用的citys.js的数据太多,所以截取了一部分如下:
citys.js
var citys = {
"districts": [{
"adcode": "100000",
"name": "中华人民共和国",
"districts": [{
"adcode": "410000",
"name": "河南省",
"districts": [{
"citycode": "0379",
"adcode": "410300",
"name": "洛阳市",
"center": "112.434468,34.663041",
"level": "city",
"districts": [{
"citycode": "0379",
"adcode": "410323",
"name": "新安县",
"center": "112.141403,34.728679",
"level": "district",
"districts": []
}]
},
{
"citycode": "0398",
"adcode": "411200",
"name": "三门峡市",
"center": "111.194099,34.777338",
"level": "city",
"districts": [{
"citycode": "0398",
"adcode": "411221",
"name": "渑池县",
"center": "111.762992,34.763487",
"level": "district",
"districts": []
}]
}
]
},
{
"citycode": [],
"adcode": "440000",
"name": "广东省",
"center": "113.280637,23.125178",
"level": "province",
"districts": [{
"citycode": "0754",
"adcode": "440500",
"name": "汕头市",
"center": "116.708463,23.37102",
"level": "city",
"districts": [{
"citycode": "0754",
"adcode": "440513",
"name": "潮阳区",
"center": "116.602602,23.262336",
"level": "district",
"districts": []
}]
}]
}]
}]
}
代码就以上所示。