请使用js实现一个省市县级联的效果

请使用js实现一个省市县级联的效果,第1张

请使用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 pre = Object.keys(e)[0];        return pre === provinceCode    })[0];    return Object.values(obj)[0];}function getCounties(cityCode) {    // 这里不能传00开头的数字,有坑    cityCode = '' + cityCode;    let obj = counties.filter(e => {        let pre = Object.keys(e)[0];        return pre === 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);

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/4919504.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-11-12
下一篇 2022-11-12

发表评论

登录后才能评论

评论列表(0条)

保存