使用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. JS获取当月第一天和最后一天

    /** * 获取当前月的第一天 */function getCurrentMonthFirst(){ var date=new Date(); date.setDate(1); return date ...

  2. xls添加 序号列技巧

    问题背景:在给xls添加一列序列时常碰到一个问题,用下拉很不科学(如果行数很多):用双击需要右边有一列不断开的数据列. 方法一:在A1 =row()回车,选择范围,快捷键 ctrl+d,   复制其文 ...

  3. Basic Calculator I && II && III

    Basic Calculator I Implement a basic calculator to evaluate a simple expression string. The expressi ...

  4. VMware的NAT网络模式

    参考链接:https://www.cnblogs.com/linjiaxin/p/6476480.html 图例:

  5. 帆软报表（finereport） 折叠树

    在进行展现数据时,希望模板的数据是可以动态折叠的,即点击数据前面的加号才展开对应下面的数据,可通过树节点按钮实现折叠树效果 实现思路: 1.这里建立一个内置数据集 添加数据 设置模板样式,添加颜色和对 ...

  6. 检测浏览器是否支持ES6

    这是阮一峰老师写的一个工具 ES-Checker,用来检查各种运行环境对 ES6 的支持情况.访问ruanyf.github.io/es-checker,可以看到您的浏览器支持 ES6 的程度.运行下 ...

  7. 【git】将本地项目上传到远程仓库

    飞机票 一. 首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安装git工具,这里给出下载地址,下载后一路直接安装即可: htt ...

  8. uboot、内核、根文件系统启动流程

    [1]Uboot的启动流程  Uboot的启动分为两个阶段.  第一阶段:设置异常向量表,设置ARM核为svc模式,关cache和关mmu,  关看门狗,初始化时钟,串口,内存,初始化栈空间,清bss ...

  9. Android读写配置2

    上篇文章采用 Properties 读写配置,各种路径错误,要么没有写入权限. 后来查资料,采用另一种方式读写 SharedPreferencesImpl 直接贴代码 公共类 -- 读写 packag ...

  10. 【国庆】记一次mysqld_safe引发mysql进程故障

    今天是举国欢庆的日子,但是Mariadb密码忘记了,于是巴拉巴拉的执行"mysqld_safe --skip-grant-tables &"这个神技能,打算跳过密码验证,直 ...