昨天收到一个新的需求,需要选择地址,因此就要做一个省市区三级联动的组件来使用,在网上找了一些资源,然后进行了尝试,没想到就这么成功了!要记录一下方便后续使用。
效果图如下
效果如下:
html部分
省:
<select name="province" id="pro" onchange="showCity()">
</select>
市:
<select name="city" id="city" onchange=" showCountry()">
</select>
县:
<select name="country" id="country">
</select>
外部引入地址js:
js实现联动:
<script src="./js/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>`
})
}