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 11 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jQuery实现简单评论功能
Aug 19 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 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
PHPEXCEL 使用小记
2013/01/06 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
python关闭windows进程的方法
2015/04/18 Python
利用python修改json文件的value方法
2018/12/31 Python
django之自定义软删除Model的方法
2019/08/14 Python
python 遍历pd.Series的index和value
2019/11/26 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
keras K.function获取某层的输出操作
2020/06/29 Python
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
宠物店的创业计划书范文
2014/01/11 职场文书
个人合作协议书范本
2014/04/18 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
社会工作专业自荐信
2014/09/26 职场文书
建筑工地文明标语
2014/10/09 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
体育教师研修感悟
2015/11/18 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书