js 省市区三级联动

最新推荐文章于 2024-09-06 13:23:10 发布

优降宁

最新推荐文章于 2024-09-06 13:23:10 发布

阅读量657

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/yjnlovepy/article/details/128713445

版权

效果展示图

三级联动

需求分析
当点击第一级下拉菜单，第二级菜单的内容会自动匹配；
选择第二级菜单时，第三级菜单会自动生成。
当取消上一级菜单的选项时，次一级选项会自动消失。

原理实现
创建一个数据数组
先查找数组里的长度，即将省的数据上传
当省的数据改变，查找省数据里的孩子，即省对应下的市，重新打印市下的数据，否则查找不到区，将市的数据上传
当市的数据改变，查找市下的孩子，上传区的数据

遇到的缺陷
当省或市改变时，对应下的市或区将会出现数据叠加
所以在省改变时，市和区的内容需要重置；市改变时，重置区的内容

<!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>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box{
            height: 500px;
            width: 400px;
            margin: 0 auto;
            
        }
        .box select{
            float: left;
        }
       .shi{
        display: none;
       }
       .qu{
        display: none;
       }
    </style>
</head>
<body>
    <div class="box">
        <select name="" id="" class="sheng">
            <option value="">请选择省</option>

        </select>
        <select name="" id="" class="shi">
            <option value="">请选择市</option>
        </select>
        <select name="" id="" class="qu">
            <option value="">请选择区</option>
        </select>
    </div>
    <script>
        var osheng=document.querySelector(".sheng")
        var oshi=document.querySelector('.shi');
        var oqu=document.querySelector('.qu');
        var frag = document.createDocumentFragment();
        var data=[{//传入省市区的数据
            "code":"1",
            "name":"1",
            "child":[{
                "code":"11",
                "name":"11",
                "child":[{
                    "code":"111",
                    "name":"111"
                },{
                    "code":"112",
                    "name":"112"
                },{
                    "code":"113",
                    "name":"113"
                }]
                },{
                    "code":"12",
                    "name":"12",
                    "child":[{
                        "code":"121",
                        "name":"122"
                    },{
                        "code":"122",
                        "name":"122"
                    },{
                        "code":"123",
                        "name":"123"
                    }]
                },{
                    "code":"13",
                    "name":"13",
                    "child":[{
                        "code":"131",
                        "name":"132"
                    },{
                        "code":"132",
                        "name":"132"
                    },{
                        "code":"133",
                        "name":"133"
                    }]
                }
            ]
            
        },{
            "code":"2",
            "name":"2",
            "child":[{
                "code":"21",
                "name":"21",
                "child":[{
                    "code":"211",
                    "name":"211"
                },{
                    "code":"212",
                    "name":"212"
                },{
                    "code":"213",
                    "name":"213"
                }]
                },{
                    "code":"22",
                    "name":"22",
                    "child":[{
                        "code":"221",
                        "name":"222"
                    },{
                        "code":"222",
                        "name":"222"
                    },{
                        "code":"223",
                        "name":"223"
                    }]
                },{
                    "code":"23",
                    "name":"23",
                    "child":[{
                        "code":"231",
                        "name":"232"
                    },{
                        "code":"232",
                        "name":"232"
                    },{
                        "code":"233",
                        "name":"233"
                    }]
                }
            ]
            
        },{
            "code":"3",
            "name":"3",
            "child":[{
                "code":"31",
                "name":"31",
                "child":[{
                    "code":"311",
                    "name":"311"
                },{
                    "code":"312",
                    "name":"312"
                },{
                    "code":"313",
                    "name":"313"
                }]
                },{
                    "code":"32",
                    "name":"32",
                    "child":[{
                        "code":"321",
                        "name":"322"
                    },{
                        "code":"322",
                        "name":"322"
                    },{
                        "code":"323",
                        "name":"323"
                    }]
                },{
                    "code":"33",
                    "name":"33",
                    "child":[{
                        "code":"331",
                        "name":"332"
                    },{
                        "code":"332",
                        "name":"332"
                    },{
                        "code":"333",
                        "name":"333"
                    }]
                }
            ]
            
        }
    ]

    for (var i = 0; i < data.length; i++) {
        console.log(data[i]);
        var option = document.createElement("option");
        option.innerHTML = data[i].name;
        option.value = data[i].code;
        frag.appendChild(option);
    }
    osheng.appendChild(frag);

    var shiArr = []
    osheng.onchange = function () {
        oshi.innerHTML="<option value=\"\">请选择市</option>"//重置内容，防止重选时内容叠加
        oqu.innerHTML="<option value=\"\">请选择区</option>"
        oqu.style.display="none"
        oshi.style.display="block"
        for (var i = 0; i < data.length; i++) {
            if (data[i].code == this.value) {
                shiArr = data[i].child;
                break;
            }
        } for (var j = 0; j < shiArr.length; j++) {
            var option = document.createElement("option");
            option.innerHTML = shiArr[j].name;
            option.value = shiArr[j].code;
            frag.appendChild(option);
        }
        oshi.appendChild(frag);
    }
    var quArr = []
    oshi.onchange = function () {
    oqu.innerHTML="<option value=\"\">请选择区</option>"
        oqu.style.display="block"
        for (var i = 0; i < shiArr.length; i++) {
            if (shiArr[i].code == this.value) {
                quArr = shiArr[i].child;
                break;
            }
        }
        for (var j = 0; j < quArr.length; j++) {
            var option = document.createElement("option");
            option.innerHTML = quArr[j].name;
            option.value = quArr[j].code;
            frag.appendChild(option);
        }
        oqu.appendChild(frag);
    }
    </script>
</body>
</html>