就js写三级联动（河南省郑州市二七区）

最新推荐文章于 2024-05-17 13:52:13 发布

写代码的机器猫

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量39

点赞数 3

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_63338784/article/details/129939603

版权

<!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>

需要自己找一个全国地区的js，改为citys即可。