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插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 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 生成WML页面方法详解
2009/08/09 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
python进程与线程小结实例分析
2018/11/11 PHP
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
使用Python实现简单的服务器功能
2017/08/25 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
python实现从wind导入数据
2019/12/03 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
英语商务邀请函范文
2014/01/16 职场文书
成绩单公证书
2014/04/10 职场文书
应用心理学专业求职信
2014/08/04 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书