jQuery实现简单三级联动效果


Posted in jQuery onSeptember 05, 2020

本文实例为大家分享了jQuery实现简单三级联动的具体代码,供大家参考,具体内容如下

首先写一个JSON数据

[
 {
  "province": "吉林省",
  "cities": [
   {
    "city": "长春市",
    "counties": ["朝阳区", "经济开发区", "高新区"]
   },
   {
    "city": "吉林市",
    "counties": ["东城区", "经济开发区", "老城区"]
   },

   {
    "city": "白山市",
    "counties": ["二道区", "河东区", "高新区"]
   }
  ]
 },
 {
  "province": "辽宁省",
  "cities": [
   {
    "city": "沈阳市",
    "counties": ["朝阳区", "经济开发区", "高新区"]
   },
   {
    "city": "大连市",
    "counties": ["东城区", "经济开发区", "老城区"]
   },
   {
    "city": "铁岭市",
    "counties": ["二道区", "河东区", "高新区"]
   }
  ]
 },
 {
  "province": "山东省",
  "cities": [
   {
    "city": "青岛市",
    "counties": ["朝阳区", "经济开发区", "高新区"]
   },
   {
    "city": "济南市",
    "counties": ["东城区", "经济开发区", "老城区"]
   },
   {
    "city": "威海市",
    "counties": ["二道区", "河东区", "高新区"]
   }
  ]
 }
]

然后用Ajax动态获取JSON文件中的数据

完整代码

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>三级联动</title>
 </head>
 <body>
  <!-- 三级联动 - 两个二级联动 -->
  <select id="province">
   <option value="">---</option>
  </select>
  <select id="city">
   <option value="">---</option>
  </select>
  <select id="county">
   <option value="">---</option>
  </select>

  <script src="js/jquery-1.12.4.js"></script>
  <script src="../js/createXMLHttpRequest.js"></script>
  <script>
   var $province = $("#province");
   var $city = $("#city");
   var $county = $("#county");
   var json;
   $.getJSON("data/server1.json", function (data) {
    // 把data保存到json全局变量中
    json = data;
    // 遍历data数据
    $.each(data, function (index, obj) {
     // 获取所有的省份信息
     var provinceName = obj.province;
     //  console.log(provinceName);
     // 将省份信息添加到对应的select元素中
     $province.append(
      `<option value="${provinceName}">${provinceName}</option>`
     );
    });

    $province.change(function () {
     // 将城市下拉列表的选项清空
     $city.empty();
     $city.append(`<option value="">---</option>`);

     // 获取到所选择的城市的文本信息
     var provinceElementName = $(this).children("option:selected").text();
     //  console.log(provinceElementName);
     $.each(json, function (index, obj) {
      var provinceName = obj.province;
      // console.log(provinceName);
      if (provinceElementName === provinceName) {
       // 获取到城市数组集合
       var cities = obj.cities;
       // 遍历城市数组集合
       $.each(cities, function (index, obj) {
        // console.log(obj.city);
        // 获取到城市名称
        var cityName = obj.city;
        // 将该省对应的城市名称添加到对应的select中
        $city.append(
         `<option value="${cityName}">${cityName}</option>`
        );
       });
      }
     });
    });

    $city.change(function () {
     // 将区级下拉列表的选项清空
     $county.empty();
     $county.append(`<option value="">---</option>`);

     // 获取到所选择的城市的文本信息
     var cityElementName = $(this).children("option:selected").text();
     //  console.log(cityElementName);
     $.each(json, function (index, obj) {
      // 获取该省对应的所有的城市信息
      var cities = obj.cities;
      // console.log(cities);
      $.each(cities, function (index, cityObj) {
       //  console.log(cityObj.city);
       var cityName = cityObj.city;
       if (cityElementName === cityName) {
        // 获取到区级数组集合
        // console.log(cityObj.counties);
        var counties = cityObj.counties;
        // 遍历区级数组集合
        $.each(counties, function (index, value) {
         // 获取到区级名称
         //  console.log(value);
         // 将该城市对应的区级名称添加到对应的select元素中
         $county.append(`<option value="${value}">${value}</option>`);
        });
       }
      });
     });
    });
   });
  </script>
 </body>
</html>

效果如下

jQuery实现简单三级联动效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
如何基于jQuery实现五角星评分
Sep 02 #jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 #jQuery
Jquery $.map使用方法实例详解
Sep 01 #jQuery
JQuery基于FormData异步提交数据文件
Sep 01 #jQuery
JQuery使用数组遍历跳出each循环
Sep 01 #jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 #jQuery
jQuery实现动态加载瀑布流
Sep 01 #jQuery
You might like
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
javascript div 弹出可拖动窗口
2009/02/26 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
简单实现js浮动框
2016/12/13 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
final, finally, finalize的区别
2012/03/01 面试题
前台岗位职责范本
2015/04/16 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
2015年党小组工作总结
2015/05/26 职场文书
SQL CASE 表达式的具体使用
2022/03/21 SQL Server