使用Html5的数据属性(data-*)Map级联关系，代码如下：
 <!DOCTYPE html>

 <html>

 <head>

     <title>Select级联</title>

     <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

     <script type=text/javascript>

         $(document).ready(function () {

             //获取子select的option

             let childOptions = $("select[name='children']").find("option");

             $("select[name='parent']").change(cascadeSelect);

             //级联过滤方法

             function cascadeSelect(event) {

                 //获取选中index及value

                 let index = event.target["selectedIndex"];

                 let item = event.target[index].value;

                 //过滤方法1

                 let options = childOptions.filter(function () {

                     return (this.value == "" || this.dataset.parent == item);

                 });

                 //过滤方法2

                 // let options = Array.from(childOptions).filter(function (option) {

                 //     return option.value == "" || option.dataset.parent == item

                 // });

                 //清空子select,重新绑定，并设定默认选中项

                 $("select[name='children']").empty().append(options);

                 $("select[name='children']").find("option[value='']").prop("selected", true);

             }

         });

     </script>

 </head>

 <body>

     <select name="parent">

         <option value="" selected>请选择</option>

         <option value="1">选项1</option>

         <option value="2">选项2</option>

         <option value="3">选项3</option>

         <option value="4">选项4</option>

         <option value="5">选项5</option>

     </select>

     <select name="children">

         <!-- 使用data-*属性Map级联关系 -->

         <option data-parent="" value="" selected>请选择</option>

         <option data-parent="1" value="1">子选项1-1</option>

         <option data-parent="1" value="2">子选项1-2</option>

         <option data-parent="1" value="3">子选项1-3</option>

         <option data-parent="1" value="4">子选项1-4</option>

         <option data-parent="1" value="5">子选项1-5</option>

         <option data-parent="2" value="6">子选项2-1</option>

         <option data-parent="2" value="7">子选项2-2</option>

         <option data-parent="2" value="8">子选项2-3</option>

         <option data-parent="2" value="9">子选项2-4</option>

         <option data-parent="3" value="10">子选项3-1</option>

         <option data-parent="3" value="11">子选项3-2</option>

         <option data-parent="3" value="12">子选项3-3</option>

         <option data-parent="4" value="13">子选项4-1</option>

         <option data-parent="4" value="14">子选项4-2</option>

         <option data-parent="4" value="15">子选项4-3</option>

         <option data-parent="4" value="16">子选项4-4</option>

         <option data-parent="4" value="17">子选项4-5</option>

         <option data-parent="5" value="18">子选项5-1</option>

         <option data-parent="5" value="19">子选项5-2</option>

         <option data-parent="5" value="20">子选项5-3</option>

     </select>

 </body>

 </html>

jQuery实现select级联的更多相关文章

  1. Jquery 实现select 3级级联查询

    实现级联效果的思路: 1. 页面加载时,先显示第一级select,第二.三级的select隐藏,根据第一级select值的改变,再显示第二级select,依次类推: 2.只从后台获取第一级select ...

  2. jquery操作select(取值，设置选中）

    最近工作中总出现select 和 option问题,整理一下,内容大部分源于网络资料 一.基础取值问题 例如<select class="selector"></ ...

  3. jquery操作select(增加，删除，清空)

    jQuery获取Select选择的Text和Value: $("#select_id").change(function(){//code...}); //为Select添加事件, ...

  4. jquery 让select元素中的某个option被选中

    jquery 操作select 取值,设置选中值 博客分类: javaScript selecttextvalue取值设置选中值 比如 <select class="type" ...

  5. jqery对于select级联操作

    问题:今天在做一个需求的时候,有一个级联操作也就是选中下拉框的一列就显示对对应的数据 处理:我在做级联的时候在option的列里面绑定click的事件发现这个事件行不通:查资料发现select触发的是 ...

  6. js与jQuery操作select大全

    Js操作Select是很常见的,也是比较实用的,每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 一.js操作select部分 判断select选项中 是否存在V ...

  7. [转]jquery设置select选中，赋值等操作

    一.基础取值问题 例如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selec ...

  8. jquery操作select取值赋值与设置选中[转]

    本节内容:jquery实现select下拉框的取值与赋值,设置选中的方法大全. 比如<select class="selector"></select> 1 ...

  9. jquery操作select大全详解

    每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select&g ...

随机推荐

  1. spring事务源码分析结合mybatis源码(一)

    最近想提升,苦逼程序猿,想了想还是拿最熟悉,之前也一直想看但没看的spring源码来看吧,正好最近在弄事务这部分的东西,就看了下,同时写下随笔记录下,以备后查. spring tx源码分析 这里只分析 ...

  2. Linux 首先基本包安装(vim啊什么的),源,源优化,项目架构介绍, (LNMuWsgi)Django项目相关软件mysql,redies,python(相关模块)安装配置测试

    内容 补充: 查看已启动服务的端口 netstat -tulnp |grep (方式1) ss -tulnp|grep (方式2) 前期铺垫: . Linux要能上网 . 掌握Linux软件包安装方法 ...

  3. $Django python中使用redis, django中使用(封装了),redis开启事务(管道)

    一 Python操作Redis之普通连接 #先安装 pip3 install redis import redis r = redis.Redis(host='127.0.0.1', port=637 ...

  4. 剑指offer数组列表

    一.数组 面试题3 : 找出数组中重复的数字 面试题3(二):不修改数组找出重复的数字 面试题4:二维数组的查找 面试题21:调整数组顺序使奇数位于偶数前面 面试题39:数组中出现次数超过一半的数字 ...

  5. python---自己实现双向链表常用功能

    这个和单向链表有几个功能是同样的代码. 但在add,insert,append,remove时,由于node拥有prev指针, 所以操作不一样.注意看注释. # coding = utf-8 # 双向 ...

  6. Redis数据结构之robj

    本文及后续文章,Redis版本均是v3.2.8 我们知道一个database内的这个映射关系是用一个dict来维护的.dict的key固定用一种数据结构来表达,这这数据结构就是动态字符串sds.而va ...

  7. Innodb与Myisam引擎的区别与应用场景

    1. 区别: (1)事务处理: MyISAM是非事务安全型的,而InnoDB是事务安全型的(支持事务处理等高级处理): (2)锁机制不同: MyISAM是表级锁,而InnoDB是行级锁: (3)sel ...

  8. 设置通过Maven创建工程的JDK版本

    在eclipse中创建的Maven工程默认的运行环境为JDK1.5,如果想修改JDK的版本,无非是右键项目点击Build Path->Configure Build Path修改JDK信息-&g ...

  9. Moonlight Shadow

    歌词 Moonlight Shadow 月光幽灵 -- Dana Winner 1. The last that ever she saw him 那是她今生最后一次见到他 2. carried aw ...

  10. python#读csv,excel,json数据

    #读csv,excel,json数据 with open('E:\\test\\xdd.csv','r') as f: for line in f.readlines(): print(line) i ...