省市区三级联动

aaa小葵

于 2023-01-15 20:14:08 发布

阅读量554

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_74033027/article/details/128697129

版权

该文章介绍了一个使用JavaScript和HTML实现的省市区三级联动下拉菜单的功能。通过数组存储省市区数据，动态更新下拉菜单内容，当选择上级菜单时，下级菜单会相应更新。同时，取消选择时，下级菜单选项会自动清除。

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

需求：

通过三个下拉菜单的联动来实现，第一级下拉菜单为省级，第二级下拉菜单为市级，第三级下拉菜单为区级。当点击第一级下拉菜单，第二级菜单的内容会自动匹配；选择第二级菜单时，第三级菜单会自动生成。当我取消上一级菜单的选项时，次一级选项会自动消失。

原理：

1.建立一个数组，分别将省市区以嵌套的方式写入数组

2.利用创建节点的方式将每个省市区名称放入下拉菜单中

3.当省级菜单发生变换的时候，先将市区全都设为【请选择】，再利用多层循环嵌套，确定每个省级元素对应的市级菜单内容，再将市级菜单元素一一对应区级菜单元素

效果图：

省市区三级联动

代码块：

    <style>
        select{
            display: inline-block;
            width: 99px;
            height: 22px;
            letter-spacing: 3px;
        }
    </style>

<body>
    <div class="box">
        <select id="sheng">
            <option disabled selected>--请选择--</option>
        </select>
        <select id="shi">
            <option disabled selected>--请选择--</option>
        </select>
        <select id="qu">
            <option disabled selected>--请选择--</option>
        </select>
    </div>
</body>

window.onload=function(){
    var arr = [{
        "name":"江苏省",
        "childen":[{
            "name":"扬州市",
            "childen":[{"name":"邗江区"},{
                "name":"广陵区"},{
                "name":"江都区"}]
            },
            {
            "name":"南京市",
            "childen":[{"name":"玄武区"},{
                    "name":"秦淮区"},{
                    "name":"建邺区"}]
            },
            {
            "name":"常州市",
            "childen":[{"name":"新北区"},{
                    "name":"钟楼区"},{
                    "name":"天宁区"}]
            }]
    },{
        "name":"安徽省",
        "childen":[{
            "name":"黄山市",
            "childen":[{"name":"屯溪区"},{
                "name":"徽州区"},{
                "name":"黄山区"}]
            },
            {
            "name":"合肥市",
            "childen":[{"name":"瑶海区"},{
                    "name":"庐阳区"},{
                    "name":"蜀山区"}]
            },
            {
            "name":"芜湖市",
            "childen":[{"name":"镜湖区"},{
                    "name":"弋江区"},{
                    "name":"鸠江区"}]
            }]
    },{
        "name":"浙江省",
        "childen":[{
            "name":"杭州市",
            "childen":[{"name":"上城区"},{
                "name":"下城区"},{
                "name":"钱塘区"}]
            },
            {
            "name":"温州市",
            "childen":[{"name":"钱塘区"},{
                    "name":"龙湾区"},{
                    "name":"瓯海区"}]
            },
            {
            "name":"宁波市",
            "childen":[{"name":"北仑区"},{
                    "name":"海曙区"},{
                    "name":"江北区"}]
            }]
    }]
    var sheng = document.querySelector("#sheng")
    var shi = document.querySelector("#shi")
    var qu = document.querySelector("#qu")
    // 给省插入值
    for (let i=0;i<arr.length;i++) {
        var option0 = document.createElement("option")
        sheng.appendChild(option0)
        option0.innerHTML=arr[i].name
        // 给省级菜单绑定事件
        sheng.onchange=function(){
            shi.innerHTML=`<option disabled selected>--请选择--</option>`
            qu.innerHTML=`<option disabled selected>--请选择--</option>`
            for(let n=0;n<arr.length;n++){
                if (sheng.value==arr[n].name) {
                    for(let m=0;m<arr[n].childen.length;m++){
                        var option1=document.createElement("option")
                        shi.appendChild(option1)
                        option1.innerHTML=(arr[n].childen)[m].name
                    }
                }
            }
        }
        shi.onchange=function(){
            qu.innerHTML=`<option disabled selected>--请选择--</option>`
            for(let d=0;d<arr.length;d++){
                for(let n=0;n<arr[d].childen.length;n++){
                    if (shi.value==arr[d].childen[n].name) {
                        for (let m=0;m<arr[d].childen[n].childen.length;m++){
                            var option2=document.createElement("option")
                            qu.appendChild(option2)
                            option2.innerHTML=(arr[d].childen)[n].childen[m].name
                        }
                    }
                }
            }    
        }
    }
}