省市区三级联动

最新推荐文章于 2024-05-14 14:48:12 发布

时不久留

最新推荐文章于 2024-05-14 14:48:12 发布

阅读量1.7k

点赞数 1

分类专栏：小案例文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_73104281/article/details/128681739

版权

小案例专栏收录该内容

17 篇文章 0 订阅

订阅专栏

需求

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

原理

先实现省市之间的，用for遍历省数组，给省下拉菜单赋值。给省数组绑定onchange事件，当菜单内容改变时，设置数组初始长度，默认索引值，嵌套市的for循环，根据省数组的下标，形成对应关系，遍历市数组，给市下拉菜单赋值。市与区类推。

<!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>
        *{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        select{
            width: 100px;
            text-align: center;
            height: 25px;
            margin-right: 10px;
            border-radius: 10px
        }

    </style>
</head>

<body>
    <select name="province" id="province">省
        <option value="">请选择  - - -</option>
    </select>
    <select name="" id="city">市
        <option value="">请选择  - - -</option>
    </select>
    
    <select name="" id="region">区
        <option value="">请选择  - - -</option>
    </select>
    <script>
        window.onload=function(){
        var province=document.getElementById("province")
        var city=document.getElementById("city")
        var region=document.getElementById("region")
        var provinceArr=["江苏","江西"]
        var cityArr=[["徐州市","扬州市"],["上饶","南昌","景德镇"]]
        var regionArr=[[["铜山区","鼓楼区"],["广陵区","邗江区"]],[["乐平市","昌江区"],["鄱阳县","广信区"],["西湖区","东湖区"]]]
        var proIndex=-1
       for(var i=0;i<provinceArr.length;i++){
        province.options.add(new Option(provinceArr[i]))
       }
       
      
       province.onchange=function getcity(){
        // if(provOp.indexOf===0){
        //     for(let m=0;m<cityArr[0].length;m++){
        //     var cityOp=document.createElement("option")
        //     cityOp.innerHTML=cityArr[0][m]
        //     city.appendChild(cityOp)
        //     }
        // }else{
        //     for(let n=0;n<cityArr[1].length;n++){
        //     var cityOp=document.createElement("option")
        //     cityOp.innerHTML=cityArr[1][n]
        //     city.appendChild(cityOp)
        //     }
        // }
            city.options.length=1
            region.options.length=1
            proIndex=this.selectedIndex-1
            
            
            if(proIndex>-1){
                for(var m=0;m<cityArr[proIndex].length;m++){
                // for(let n=0;n<regionArr[i][m].length;n++){
                //     var regionOp=document.createElement("option")
                //     regionOp.innerHTML=regionArr[i][m][n]
                //     region.appendChild(regionOp)
                // }
                city.options.add(new Option(cityArr[proIndex][m]))
                // var cityOp=document.createElement("option")
                // cityOp.innerHTML=cityArr[i][m]
                // city.appendChild(cityOp)
            }
        //     city.onchange = function getQuxian() {
        // quxian.options.length = 1;
        // var cityIndex = this.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]));
        //     }
        // }      

            }
            
            
        }
        city.onchange=function getregion(){
            region.options.length=1
            var cityIndex=this.selectedIndex-1
            if(cityIndex>-1){
                for(var i=0;i<regionArr[proIndex][cityIndex].length;i++){
                    region.options.add(new Option(regionArr[proIndex][cityIndex][i]))
                }
            }
        }
        
    }

       
        
        
    </script>
</body>

</html>