html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="../routes/citys.js"></script>
</head>
<body>
<select id="prov"></select>
省
<select id="city"></select>
市
<select id="dis"></select>
区/县
</body>
<script>
var oProv = document.getElementById("prov");
var oCity = document.getElementById("city");
var oDis = document.getElementById("dis");
// console.log(citys);
// console.log(citys.districts[0].districts);
var provArr = citys.districts[0].districts; //数组 34个省份对象构成的数组
//添加省份
provArr.forEach(function (item) {
// console.log(item); //对象 遍历出的每个省份对象
oProv.innerHTML += `<option value="${item.adcode}">${item.name}</option>`;
});
//添加省份对应的市
oProv.onchange = function () {
var val = this.value; //获取当前选择的省份的value
for (var m = 0; m < provArr.length; m++) {
var obj = provArr[m]; //对象 得到每个省份数据
// console.log(obj);
if (val === obj.adcode) {
//如果选择的省份的value值与对象的adcode值一样
var cityArr = obj.districts; //数组 获取当前省份里的districts属性值
oCity.innerHTML = "";
cityArr.forEach((item) => {
//遍历数组 省份对应的市渲染
oCity.innerHTML += `<option value="${item.adcode}">${item.name}</option>`;
});
break;
}
}
addDis();
};
oProv.onchange();
// 添加区/县
oCity.onchange = addDis;
function addDis() {
var val = oCity.value; //市对应的value 6位数字 410987
var two = val.substr(0, 2); //截取市的value前两位 "41"
for (var k = 0; k < provArr.length; k++) {
var obj = provArr[k]; //对象 遍历出来的每个省份
// console.log(obj.adcode);//省份对应的编码
if (obj.adcode.startsWith(two)) {
//如果省份对应编码以截取的value前两位开头
var c = obj.districts; //数组 得到当前市对应的省份里的所有市
for (var m = 0; m < c.length; m++) {
var code = c[m].adcode; //得到每一个市对应的编码
if (val === code) {
var disArr = c[m].districts; //数组 区/县对应的数组
oDis.innerHTML = "";
disArr.forEach((item) => {
oDis.innerHTML += `<option value="${item.code}">${item.name}</option>`;
});
break;
}
}
break;
}
}
}
addDis();
</script>
</html>
<script src="../routes/citys.js"></script> 外链js代码 省市区三级联动