「📖 作者：极客小俊」
「🔥 把逻辑思维转变为代码的技术博主」

我们今天来使用纯javascript来实现一个简易的三级联动效果，不使用任何框架以及插件!😃😃😃

Javascript + JSON + 数组实现三级联动 😏

准备数据 🚀

这里我们就用测试JSON数据即可, 数据内容你可以随意! 如下

var data=[
{"name":'中国',"val":"ch","city":
    [
        {"name":"重庆市","val":"cqs","area":[
                {"name":"渝中区"},
                {"name":"江北区"}
            ]
        },
        {"name":"深圳市","val":"szs","area":[
                {"name":"浦东"},
                {"name":"浦西"}
            ]
        }
    ]
},

{"name":'美国',"val":"ag","city":
    [
        {"name":"纽约","val":"newyork","area":[
                {"name":"皇后区"},
                {"name":"时代广场"}
            ]
        },
        {"name":"华盛顿","val":"hsd","area":[
                {"name":"白宫"},
                {"name":"神盾局"}
            ]
        }
    ]
}
];

HTML代码结构🧱

国家：<select id="pro">
<option value="">请选择省份</option>
</select>
城市: <select id="city">
<option value="">请选择市</option>
</select>
地区: <select id="area">
<option value="">请选择区</option>
</select>

javascript代码逻辑 🛎️

       var _pro=document.getElementById("pro");
       var _city=document.getElementById("city");
       var _area=document.getElementById("area");

       for(var i=0;i<data.length;i++){
           var _op=document.createElement("option");
           _op.value=data[i].val;
           _op.innerHTML=data[i].name;
           _pro.appendChild(_op);
       };


       _pro.onchange=function(){
           _city.innerHTML="";
           _area.innerHTML="";
         
           if(this.value==""){
               var _oPempty1=document.createElement("option");
               _oPempty1.value=''
               _oPempty1.innerHTML='请选择市';
               _city.appendChild(_oPempty1);

               var _oPempty2=document.createElement("option");
               _oPempty2.value=''
               _oPempty2.innerHTML='请选择区';
               _area.appendChild(_oPempty2);
           }else{
               for(var i=0;i<data.length;i++){
                   if(this.value==data[i].val){  
                           for(var j=0;j<data[i].city.length;j++){  
 
                                   var _op2=document.createElement("option");
                                   _op2.value=data[i].city[j].val;  
                                   _op2.innerHTML=data[i].city[j].name;
                                   _city.appendChild(_op2);
                           }

                       for(var j=0;j<data[i].city[0].area.length;j++){
                                   var _op3=document.createElement("option");
                                   _op3.value=data[i].city[0].area[j].name;
                                   _op3.innerHTML=data[i].city[0].area[j].name;
                                   _area.appendChild(_op3);
                       }
                   }
               }
           }
       }


       _city.onchange=function(){
           _area.innerHTML="";
           for(var i=0;i<data.length;i++){
               for(var j=0;j<data[i].city.length;j++){
                   if(data[i].city[j].val==this.value){
                      var len=data[i].city[j].area.length;
                       for(var k=0;k<len;k++){
                           var _op4=document.createElement("option");
                           _op4.value=data[i].city[j].area[k].name;
                           _op4.innerHTML=data[i].city[j].area[k].name;
                           _area.appendChild(_op4);
                       }
                   }
               }
           }
       }

最终效果如下:

如图

这就是使用js+json来实现简易的三级联动的效果!

对于html结构美化大家可以自行使用css样式进行美化，这里就不过多赘述了!

那么接下来，我们可以使用js+数组的形式， 也来实现一下这个三级联动的效果

JS三级联动数组数据格式 🛢️

如下

var arr=['中国','美国','日本'];
       arr['中国']=['重庆市','北京市','上海市'];
       arr['美国']=['纽约','华盛顿','阿拉斯加'];
       arr['日本']=['东京','大阪','名古屋'];

       arr['重庆市']=['解放碑','沙坪坝','九龙坡'];
       arr['北京市']=['天安门','朝阳区','海淀区'];
       arr['上海市']=['黄浦江','东方明珠','黄浦区','虹口机场'];

       arr['纽约']=['皇后区','时代广场','布朗克斯区'];
       arr['华盛顿']=['林肯纪念堂','白宫','美国国会图书馆'];
       arr['阿拉斯加']=['蕨草镇'];

       arr['东京']=['东京迪士尼','银座','东京塔'];
       arr['大阪']=['天守阁','天保山海游','四天王寺'];
       arr['名古屋']=['热田神宫'];

HTML代码结构 🧱

国家:<select id="country"></select>
城市:<select id="province"></select>
地区:<select id="area"></select>

javascript代码实现逻辑 🛎️

function init(){
    fillData(arr,'country');
    fillData(arr['中国'],'province');
    fillData(arr['重庆市'],'area');

}


function fillData(arr,id){
    var obj=document.getElementById(id);
    obj.options.length=0;
    var i=0;
    var len=arr.length;
    for(;i<len;i++){
        var _Option = new Option();
        _Option.text=arr[i];
        _Option.value=arr[i];
        obj.add(_Option);
    }
}

function chchangePro(StrIndex){
    fillData(arr[StrIndex],'province');
    fillData(arr[arr[StrIndex][0]],'area');
}

function changeArea(StrIndex){
    fillData(arr[StrIndex],'area');
}


window.onload=function () {
    //初始化效果
    init();

    var _country=document.getElementById('country');
    var _province=document.getElementById('province');
    _country.onchange=function () {
        chchangePro(this.value);
    }

    _province.onchange=function () {
        changeArea(this.value);
    }

}

最后实现效果

如图

怎么样，js+数组也可以实现这种效果。哈哈哈哈  🛕🛕🛕

总结想法和思路💡

好了我大致总结了一下思路

如下:

1. 最重要的就是先要把数组和JSON的数据结构理解清楚,然后把数据的存储结构先写出来.

2. For循环的结构思路要清晰,

3. 创建元素要在for循环中.

4. onchange事件的使用, 当值发生变化的时候触发某一个方法.

5. 每次调用取值函数的时候清空一下

如果文章对你有帮助的话就请

👍点赞 ✍️评论 💙收藏

一键三连哦！

如果以上内容有任何错误或者不准确的地方，🤝🤝欢迎在下面 👇 留个言指出!

或者你有更好的想法，欢迎一起交流学习❤️❤️❤️❤️❤️