关于省，市，县三级联动, js文件

最新推荐文章于 2024-05-22 09:19:22 发布

LMZ0306KB0824

最新推荐文章于 2024-05-22 09:19:22 发布

阅读量286

点赞数

本文链接：https://blog.csdn.net/KB0824liu/article/details/129823461

版权

<body>
    省会：
    <select name="province" id="pro" onchange="showCity()">
    </select>
    市：
    <select name="city" id="city" onchange="showCountry()"></select>
    县：
    <select name="xian" id="country"></select>
    <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}`
            })
            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>`
            })
        }
    </script>
</body>