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轻松实现无缝轮播效果
Mar 22 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 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 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
Python实现网站注册验证码生成类
2017/06/08 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
Python中的asyncio代码详解
2019/06/10 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
python实现简单猜单词游戏
2020/12/24 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
拉丁舞学习者的自我评价
2013/10/27 职场文书
初中地理教学反思
2014/01/11 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis