使用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. Log日志

    Log.e("tag", "错误信息");  Log.w("tag", "警告信息");  Log.i("ta ...

  2. warning: ISO C++ forbids converting a string constant to 'char*' [-Wwrite-strings]

    在C++中, char* p = "abc"; // valid in C, invalid in C++ 会跳出警告:warning: ISO C++ forbids conve ...

  3. LeetCode 第五题 最长的回文字符串 （JAVA）

    Longest Palindromic Substring 简介:字符串中最长的回文字符串 回文字符串:中心对称的字符串 ,如 mom,noon 问题详解: 给定一个字符串s,寻找字符串中最长的回文字 ...

  4. IIS 一键安装及卸载

    IIS6:适用于win server 2003:: ******************* :: * 安装 :: ******************* :Install Cls @echo. &am ...

  5. Git使用六：版本对比

    准备工作: 创建一个新的项目,并初始化git 创建两个文件,并写入对应内容(utf-8无bom格式) 执行git add 命令将两个文件添加到暂存区,执行commit命令提交到仓库并生产快照 修改工作 ...

  6. type=file的inpu美化，自定义上传按钮样式

    <div class="div1"> <div class="div2">点击上传</div> <input type ...

  7. DDoS攻击与防御（4）

    在发生DDoS攻击的情况下,可以通过一些缓解技术来减少攻击对自身业务和服务的影响,从而在一定程度上保障业务正常运行.缓解DDoS攻击的主要方法是对网络流量先进行稀释再进行清洗. 1.攻击流量的稀释 1 ...

  8. SQL Server Report Server 报表用户权限T-SQL查询

    /************************************************************************** 查询用户在报表上的权限 ************ ...

  9. 导入Maven 工程pom.xml首行报错解决方法

    1.利用IDE导入一个Maven工程,但是pom.xml文件首行报错,发现是maven版本需要升级 2.在pom.xml文件 增加配置 <properties> <maven-jar ...

  10. loadrunner之java user脚本开发

    脚本开发环境: loadrunner11.0 jdk1.6.32_x86_32 脚本开发 1.选择JavaVuser协议 2.配置java环境(Vuser--RunTime Settings) 3.开 ...