[js] 第196天 请使用js实现一个省市县级联的效果

[haizhilin]

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

[tyounami]

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