<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);
