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 Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 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
第1次亲密接触PHP5(1)
2006/10/09 PHP
php 获取百度的热词数据的代码
2012/02/18 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
python中global用法实例分析
2015/04/30 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
Python实现的购物车功能示例
2018/02/11 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
python实现数据分析与建模
2019/07/11 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
外贸业务员工作职责
2014/01/06 职场文书
五型班组建设方案
2014/02/10 职场文书
自立自强的名人事例
2014/02/10 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
服务承诺书
2015/01/19 职场文书
初中政治教学工作总结
2015/08/13 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
nginx访问报403错误的几种情况详解
2022/07/23 Servers