哇塞 我初学javascript第1天就会使用原生数组+JSON+DOM实现了国家--城市--区县三级联动数据切换效果

简介: 使用原生数组+JSON+DOM实现了国家--城市--区县三级联动数据切换

🚀 个人主页 极客小俊
✍🏻 作者简介:web开发者、设计师、技术分享博主
🐋 希望大家多多支持一下, 我们一起进步!😄
🏅 如果文章对你有帮助的话,欢迎评论 💬点赞👍🏻 收藏 📂加关注

1.png

我们今天来使用纯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);
                        }
                    }
                }
            }
        }

最终效果如下:

如图
2.gif

这就是使用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);
     }

 }

最后实现效果

如图
3.gif

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

总结想法和思路💡

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

  1. 最重要的就是先要把数组和JSON的数据结构理解清楚,然后把数据的存储结构先写出来.
  2. For循环的结构思路要清晰,
  3. 创建元素要在for循环中.
  4. onchange事件的使用, 当值发生变化的时候触发某一个方法.
  5. 每次调用取值函数的时候清空一下
相关文章
|
14天前
|
XML 存储 JSON
Twaver-HTML5基础学习(19)数据容器(2)_数据序列化_XML、Json
本文介绍了Twaver HTML5中的数据序列化,包括XML和JSON格式的序列化与反序列化方法。文章通过示例代码展示了如何将DataBox中的数据序列化为XML和JSON字符串,以及如何从这些字符串中反序列化数据,重建DataBox中的对象。此外,还提到了用户自定义属性的序列化注册方法。
30 1
|
11天前
|
存储 JSON Go
在Gin框架中优雅地处理HTTP请求体中的JSON数据
在Gin框架中优雅地处理HTTP请求体中的JSON数据
|
10天前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
9 4
|
15天前
|
JSON JavaScript 数据格式
vue写入json数据到文本中+vue引入cdn的用法
vue写入json数据到文本中+vue引入cdn的用法
38 10
|
13天前
|
JSON 数据格式
Blob格式转json格式,拿到后端返回的json数据
文章介绍了如何将后端返回的Blob格式数据转换为JSON格式,并处理文件下载和错误提示。
24 0
Blob格式转json格式,拿到后端返回的json数据
|
15天前
|
JavaScript
Vue3基础(十wu)___ref获取原生dom元素
本文介绍了Vue3中使用`ref`来获取和操作原生DOM元素的方法,通过示例展示了如何通过`.value`改变元素的样式。
28 0
Vue3基础(十wu)___ref获取原生dom元素
|
15天前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
15 0
原生JavaScript+canvas实现五子棋游戏_值得一看
|
28天前
|
JSON JavaScript 前端开发
Haskell中的数据交换:通过http-conduit发送JSON请求
Haskell中的数据交换:通过http-conduit发送JSON请求
|
1月前
|
存储 JSON API
Python编程:解析HTTP请求返回的JSON数据
使用Python处理HTTP请求和解析JSON数据既直接又高效。`requests`库的简洁性和强大功能使得发送请求、接收和解析响应变得异常简单。以上步骤和示例提供了一个基础的框架,可以根据你的具体需求进行调整和扩展。通过合适的异常处理,你的代码将更加健壮和可靠,为用户提供更加流畅的体验。
73 0
|
2月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
31 0