使用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. 简单对比git pull和git pull --rebase的使用

    使用下面的关系区别这两个操作:git pull = git fetch + git mergegit pull --rebase = git fetch + git rebase 现在来看看git m ...

  2. LNMP一键包安装后解决MySQL无法远程连接问题

    MySQL/MariaDB无法远程连接,如何开启? 1,没有给root对应的权限 -- @'192.168.1.123'可以替换为@‘%’就可任意ip访问 mysql> GRANT ALL PR ...

  3. STM32F0使用LL库实现MS5536C通讯

    在本次项目中,限于空间要求我们选用了STM32F030F4作为控制芯片.这款MCU不但封装紧凑,而且自带的Flash空间也非常有限,所以我们选择了LL库实现.在本文中我们说明一下,使用LL库实现MS5 ...

  4. Sass 增强语法的样式表

    功能: 完全兼容CSS3 相对CSS,扩展了变量.嵌套和mixins 对控制颜色和其他值的非常有用的方法 高级功能,如库的直接控制 良好的格式,自定义输出 语法 对于Sass,有两种语法. 一种叫SC ...

  5. fire workflow总结

    一.Fire WorkFlow核心1.IPersistenceService存储服务.Fire Workflow 缺省情况下使用hibernate 进行数据库存取.如果你的系统不是使用hibernat ...

  6. JavaScript我学之一变量类型

    本文是网易云课堂金旭亮老师的课程笔记,记录下来,以供备忘. 变量类型  只有6种 : 四种原始数据类型boolean , number, string , undefine, 其他object,fun ...

  7. A tuple is defined as a function

    In James Munkres "Topology", the concept for a tuple, which can be \(m\)-tuple, \(\omega\) ...

  8. 【JAVA】servlet 定时启动

    步骤一: web.xml中加上如下的代码: <load-on-startup>10</load-on-startup>这句话是重点. <servlet> <s ...

  9. Python学习（四十）—— Djago之认证系统

    一.COOKIE 与 SESSION 概念 cookie不属于http协议范围,由于http协议无法保持状态,但实际情况,我们却又需要“保持状态”,因此cookie就是在这样一个场景下诞生. cook ...

  10. h5怎么做分享到QQ 、朋友圈、微信 、微博等功能

    微信已经成为我们日常聊天联系基本的必备工具,所以小菜我首先介绍一下如何调用微信的分享功能.其实除了可以在微信上分享到朋友圈和发送给好友,微信的分享接口还提供了分享到QQ和分享到腾讯微博等,就是在页面的 ...