<!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>
</head>
<body>
省:
<select name="province" id="pro" onchange="showCity()">
</select>
市:
<select name="city" id="city" onchange=" showCountry()">
</select>
县:
<select name="country" id="country">
</select>
<script src="./citys.js"></script>
<script>
let _pro = document.getElementById("pro"); //省
let _city = document.getElementById("city"); //市
let _country = document.getElementById("country"); //市
//省
//获取所有省数组
let districts = citys.districts[0].districts
districts.forEach(province => {
_pro.innerHTML += `<option value="${province.adcode}">${province.name}</option>`
});
//市
showCity();
function showCity() {
_city.innerHTML = ""; //每次渲染前清空
//获取当前选择的省
let proCode = _pro.value;
//根据code查找对应的省对象
let province = districts.find(province => {
return province.adcode == proCode;
})
//渲染所有市
province.districts.forEach(city => {
_city.innerHTML += `<option value="${city.adcode}">${city.name}</option>`
})
//切换省的同时,切换市和县
showCountry();
}
//县
showCountry();
function showCountry() {
_country.innerHTML = "";
//获取选择的市的code
let cityAdCode = _city.value;
//获取当前选择的省
let proCode = _pro.value;
//根据code查找对应的省对象
let province = districts.find(province => {
return province.adcode == proCode;
})
//查找当前选择的市对象
let city = province.districts.find(city => {
return city.adcode == cityAdCode
})
//渲染县
city.districts.forEach(country => {
_country.innerHTML += `<option value="${country.adcode}">${country.name}</option>`
})
}
</script>
</body>
</html>