省市县三级联动

最新推荐文章于 2024-08-23 15:53:59 发布

原ℳ来

最新推荐文章于 2024-08-23 15:53:59 发布

阅读量48

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_52983838/article/details/129830493

版权

该HTML代码实现了一个动态的省市区选择器，通过JavaScript处理DOM元素，根据用户选择的省份动态加载对应的城市列表，进一步选择城市后加载相应的县/区列表。功能基于一个预定义的`citys.js`数据文件。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

            })
            //切换省的同时，切换市和县
            showCountry();
        }

        //县
        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>

</html>