省市区三级联动

BBsix666

已于 2023-01-18 04:06:39 修改

阅读量115

点赞数

文章标签： html 前端 javascript

于 2023-01-14 22:32:07 首次发布

本文链接：https://blog.csdn.net/BBsix666/article/details/128690221

版权

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

原理

基本用的for循环

在创建arr的时候分组

<!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 id="sheng">
        <option>省</option>
    </select>
    <select id="shi">
        <option>市</option>
    </select>
    <select id="qu">
        <option>区</option>
    </select>
    <script>
        var sheng = document.getElementById("sheng")
        var shi = document.getElementById("shi")
        var qu = document.getElementById("qu")
        var arrsheng = ["大江苏", "大台湾", "小日本"]
        var arrshi = [["南京", "徐州", "南通"], [
            "台湾一市", "台湾二市"
        ], ["日本小岛", "日本小小岛"]
        ]
        var arrqu = [[['南京的一个区', '南京的二个区'], ['徐州的一个区', '徐州的二个区'], ['南通的一个区', '南通的二个区']], [['台湾一市的一区', '台湾一市的二区'], ['台湾一市的一区', '台湾二市的二区'], ['日本小岛的屎盆子', '日本小岛的狗'], ['日本小小岛的鸟蛋', '日本小小岛的贱人']]
        ]
        var index = -1
        for (var i = 0; i < arrsheng.length; i++) {
            sheng.options.add(new Option(arrsheng[i]));
        }
        sheng.onchange = function getShi() {
            shi.options.length = 1;
            qu.options.length = 1;
            index = this.selectedIndex - 1;
            if (index > -1) {
                for (var i = 0; i < arrshi[index].length; i++) {
                    shi.options.add(new Option(arrshi[index][i]));
                }
            }
        }
        shi.onchange = function getQu() {
        qu.options.length = 1;
        var index2 = this.selectedIndex - 1;
        if(index2 > -1) {
            for(var i = 0; i < arrqu[index][index2].length; i++) {
                qu.options.add(new Option(arrqu[index][index2][i]));
            }
        }      
    }
    </script>
</body>

</html>

省市区三级联动