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

我们今天来使用纯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代码结构

国家：
请选择省份

城市: 
请选择市

地区: 
请选择区

javascript代码逻辑 ️

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

        for(var i=0;i

最终效果如下:

如图

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

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

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

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

如下

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

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

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

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

HTML代码结构

国家:
城市:
地区:

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

最后实现效果

如图

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

总结想法和思路

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

如下:

0. 最重要的就是先要把数组和JSON的数据结构理解清楚,然后把数据的存储结构先写出来.
1. For循环的结构思路要清晰,
2. 创建元素要在for循环中.
3. onchange事件的使用, 当数值发生变化的时候触发某一个方法.
4. 每次调用取值函数的时候清空一下

"点赞" "✍️评论" "收藏"

大家的支持就是我坚持创作下去的动力!​

---

​如果以上内容有任何错误或者不准确的地方，欢迎在下面 留个言指出、或者你有更好的想法，欢迎一起交流学习❤️❤️❤️❤️❤️​

支付宝打赏

微信打赏

数组   会用   效果

发表评论

留言与评论（共有 0 条评论） “”

验证码：