[js] 第196天 请使用js实现一个省市县级联的效果
haizhilin2013 opened this issue · comments
第196天 请使用js实现一个省市县级联的效果
<div id="app">
<select id="pro"></select>
<select id="cit"></select>
<select id="cou"></select>
</div>
var provinces = [
{ '001': '浙江', },
{ '002': '广东', },
{ '003': '江苏', },
];
var cities = [
{
'001': [{
'001001': '杭州'
},
{
'001002': '台州'
}]
},
{
'002': [{
'002001': '广州'
},
{
'002002': '佛山',
}]
},
{
'003': [{
'003001': '南京'
},
{
'003002': '苏州',
}]
}
];
var counties = [
{
'001001': [{
'001001001': '杭州sub1'
},
{
'001001002': '杭州sub2',
}]
}
,
{
'001002': [{
'001002001': '台州sub1'
},
{
'001002002': '台州sub2',
}]
},
{
'002001': [{
'002001001': '广州sub1'
},
{
'002001002': '广州sub2',
}]
},
{
'002002': [{
'002002001': '佛山sub1'
},
{
'002002002': '佛山sub2',
}]
},
{
'003001': [{
'003001001': '南京sub1'
},
{
'003001002': '南京sub2',
}]
},
{
'003002': [{
'003002001': '苏州sub1'
},
{
'003002002': '苏州sub2',
}]
},
];
function getCities(provinceCode) {
provinceCode = '' + provinceCode;
let obj = cities.filter(e => {
let code = Object.keys(e)[0];
return code === provinceCode
})[0];
return Object.values(obj)[0];
}
function getCounties(cityCode) {
// 这里不能传00开头的数字,有坑
cityCode = '' + cityCode;
let obj = counties.filter(e => {
let code = Object.keys(e)[0];
return code === cityCode
})[0];
return Object.values(obj)[0];
}
var $province = document.querySelector('#pro');
var $city = document.querySelector('#cit');
var $county = document.querySelector('#cou');
function commonFill($el, data) {
while ($el.firstChild)
$el.removeChild($el.firstChild);
data.forEach(e => {
var key = Object.keys(e)[0];
var value = Object.values(e)[0];
$el.appendChild(new Option(value, key));
});
return $el.value;
}
// 填充省份
function fillProvinces() {
return commonFill($province, provinces);
}
// 填充城市
function fillCities(provinceCode) {
var cities = getCities(provinceCode);
return commonFill($city, cities);
}
// 填充县区
function fillCounty(cityCode) {
var counties = getCounties(cityCode);
return commonFill($county, counties);
}
$province.addEventListener('change', e => {
var provinceCode = e.target.value;
var currentCityValue = fillCities(provinceCode);
fillCounty(currentCityValue);
})
$city.addEventListener('change', e => {
var cityCode = e.target.value;
fillCounty(cityCode)
})
var currentProvinceValue = fillProvinces();
var currentCityValue = fillCities(currentProvinceValue);
var currentCoutuntyValue = fillCounty(currentCityValue);