省市区三级联动

black_tea114514

于 2023-01-18 00:03:41 发布

阅读量462

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/black_tea114514/article/details/128721989

版权

要求：

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

思路;

运用到了二维，三维数组，然后当选中省级菜单时，市级二维数组选中对应的市元素集，然后在遍历出该元素集中的城市，区元素同理

代码：

 <style>
        *{
            outline: none;
            margin: 0;
            padding: 0;
        }
        body{
            width: 500px;
            margin: 200px auto 0;
        }
    </style>
</head>
    <body>
        <select id="province">
            <option>请选择所在省份</option>
        </select>
        <select id="city">
            <option>请选择所在城市</option>
        </select>
        <select id="quxian">
            <option>请选择所在区县</option>
        </select>
    </body>
    <script>
        var arr_province = ["江苏", "安徽", "福建"];
        var arr_city = [
            ["南京", "无锡", "徐州"],
            ["合肥", "芜湖","滁州"],
            ["福州", "厦门"]
        ]
        var arr_quxian = [
            [
                ["玄武区","秦淮区","鼓楼区","浦口区"],
                ["锡山区","惠山区","滨湖区","梁溪区"],
                ["云龙区","泉山区","贾汪区","铜山区"],
            ],
            [
                ["瑶海区", "庐阳区", "蜀山区", "包河区"],
                ["镜湖区", "鸠江区", "湾沚区", "繁昌区"]
            ],
            [
                ["鼓楼区", "台江区", "沧山区", "马尾区"],
                ["吴兴区","南浔区","德清县","长兴区"]
            ]
        ];
        var province = document.getElementById("province");
        var city = document.getElementById("city");
        var quxian = document.getElementById("quxian");
        var proIndex = 0; 
        for(var i = 0; i < arr_province.length; i++) {
            province.options.add(new Option(arr_province[i]));
        }
        province.onchange = function() {
            city.options.length = 1;//长度为1时，只会显示索引值为0的元素
            quxian.options.length = 1;
            proIndex = province.selectedIndex - 1;//因为0为“请选择”，所有要-1才能对应索引值
            if(proIndex > -1) {
                for(var i = 0; i < arr_city[proIndex].length; i++) {
                    city.options.add(new Option(arr_city[proIndex][i]));
                } 
            }
        }
        city.onchange = function() {
            quxian.options.length = 1;
            var cityIndex = city.selectedIndex - 1;
            if(cityIndex > -1) {
                for(var i = 0; i < arr_quxian[proIndex][cityIndex].length; i++) {
                    quxian.options.add(new Option(arr_quxian[proIndex][cityIndex][i]));
                }
            }      
        }
    </script>