使用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. ZH奶酪：Ubuntu 14.04安装LAMP(Linux，Apache，MySQL，PHP)

    (Linux Operating System,Apache Web Server,MySQL database,PHP) 首先,一个三行命令搞定的方法: sudo apt-get update su ...

  2. JAVA进阶6

    间歇性混吃等死,持续性踌躇满志系列-------------第6天 1.数组 package cn.intcast.day06.demo01; /* 直接打印数组名称,得到的是数组对应的内存地址的哈希 ...

  3. xls表格 ctrl+D 和ctrl+Enter区别 --快速填充相同数据，同时填充多个不同数据

    一.ctrl+Enter应用 如何快速实现下图两个图的填充值效果? ==>效果 1. 选择A列,或者所需要填充的范围 (下面利用 ctrl+G定位应用) 2.Ctrl+G 定位 选择 空值  在 ...

  4. windows系统上安装mysql操作过程及常见错误处理

    1.下载mysql免安装版本,下载地址:http://dev.mysql.com/downloads/mysql/ 解压到自己的目录 2.编辑配置文件: 新建一个文本文件,修改名称及后缀为my.ini ...

  5. mysql 客户端连接报错Illegal mix of collations for operation

    服务端用的是utf-8,客户端工具打开表和视图是会报Illegal mix of collations for operation错误,经排查,可以采用以下语句解决 SET character_set ...

  6. 【easy】349. Intersection of Two Arrays

    找两个数组的交集(不要多想,考虑啥序列之类的,就是简单的两堆数求交集啊!!!最后去个重就好了) //LeetCode里用到很多现成函数的时候,苦手だな- //这个题的思路是,先sort,把两个vect ...

  7. 【原创】大叔问题定位分享（7）Spark任务中Job进度卡住不动

    Spark2.1.1 最近运行spark任务时会发现任务经常运行很久,具体job如下: Job Id  ▾ Description Submitted Duration Stages: Succeed ...

  8. centos + nginx + php-fpm +mysql的简单配置

    安装前准备 安装约定(这个根据自己习惯,可自行修改) 1.软件源码包我都下载到/usr/local/src这个目录下 2.软件一般都编译安装到/usr/local这个目录下 安装基础库 yum -y ...

  9. Redis 可视化工具：Web Redis Manager

    以前用的:RedisDesktopManager (0.9.3以后需要订阅) https://github.com/uglide/RedisDesktopManager/releases 现在需要订阅 ...

  10. day14.生成器迭代器作业

    1.写生成器,从文件中读取内容,再每一行读取的内容前加上 ‘***’之后返回给用户 def func(filename): word = input('输入你想找的内容:') with open(fi ...