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日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jquery轮播图插件使用方法详解
Jul 31 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流量统计功能的实现代码
2012/09/29 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
VBScript版代码高亮
2006/06/26 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
Python I/O与进程的详细讲解
2019/03/08 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
详解Python中的路径问题
2020/09/02 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
电子商务专业推荐信范文
2013/12/02 职场文书
英文自荐信
2013/12/15 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
安全施工责任书
2014/08/25 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
大学副班长竞选稿
2015/11/21 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers