jQuery实现select级联

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Select级联</title>
 5     <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 6     <script type=text/javascript>
 7         $(document).ready(function () {
 8             //获取子select的option
 9             let childOptions = $("select[name=‘children‘]").find("option");
10             $("select[name=‘parent‘]").change(cascadeSelect);
11             //级联过滤方法
12             function cascadeSelect(event) {
13                 //获取选中index及value
14                 let index = event.target["selectedIndex"];
15                 let item = event.target[index].value;
16                 //过滤方法1
17                 let options = childOptions.filter(function () {
18                     return (this.value == "" || this.dataset.parent == item);
19                 });
20                 //过滤方法2
21                 // let options = Array.from(childOptions).filter(function (option) {
22                 //     return option.value == "" || option.dataset.parent == item
23                 // });
24                 //清空子select,重新绑定，并设定默认选中项
25                 $("select[name=‘children‘]").empty().append(options);
26                 $("select[name=‘children‘]").find("option[value=‘‘]").prop("selected", true);
27             }
28         });
29     </script>
30 </head>
31 <body>
32     <select name="parent">
33         <option value="" selected>请选择</option>
34         <option value="1">选项1</option>
35         <option value="2">选项2</option>
36         <option value="3">选项3</option>
37         <option value="4">选项4</option>
38         <option value="5">选项5</option>
39     </select>
40     <select name="children">
41         <!-- 使用data-*属性Map级联关系 -->
42         <option data-parent="" value="" selected>请选择</option>
43         <option data-parent="1" value="1">子选项1-1</option>
44         <option data-parent="1" value="2">子选项1-2</option>
45         <option data-parent="1" value="3">子选项1-3</option>
46         <option data-parent="1" value="4">子选项1-4</option>
47         <option data-parent="1" value="5">子选项1-5</option>
48         <option data-parent="2" value="6">子选项2-1</option>
49         <option data-parent="2" value="7">子选项2-2</option>
50         <option data-parent="2" value="8">子选项2-3</option>
51         <option data-parent="2" value="9">子选项2-4</option>
52         <option data-parent="3" value="10">子选项3-1</option>
53         <option data-parent="3" value="11">子选项3-2</option>
54         <option data-parent="3" value="12">子选项3-3</option>
55         <option data-parent="4" value="13">子选项4-1</option>
56         <option data-parent="4" value="14">子选项4-2</option>
57         <option data-parent="4" value="15">子选项4-3</option>
58         <option data-parent="4" value="16">子选项4-4</option>
59         <option data-parent="4" value="17">子选项4-5</option>
60         <option data-parent="5" value="18">子选项5-1</option>
61         <option data-parent="5" value="19">子选项5-2</option>
62         <option data-parent="5" value="20">子选项5-3</option>
63     </select>
64 </body>
65 </html>

时间： 2024-12-16 05:24:53

jQuery实现select级联的相关文章

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

最近工作中总出现select 和 option问题,整理一下,内容大部分源于网络资料一.基础取值问题例如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector").val("pxx"); 2.设置text为pxx的项选中 $(".selector").find("option[text='pxx']").

jQuery获取Select选择的Text和Value: 1 2 3 4 5 6 7 8 9 $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的text var checkValue=$("#se

jquery操作select取值赋值与设置选中

本节内容:jquery实现select下拉框的取值与赋值,设置选中的方法大全. 比如<select class="selector"></select> 1.设置value为pxx的项选中复制代码代码示例: $(".selector").val("pxx"); 2.设置text为pxx的项选中复制代码代码示例: $(".selector").find("option[text='pxx']

js与jQuery操作select大全

Js操作Select是很常见的,也是比较实用的,每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 一.js操作select部分判断select选项中是否存在Value="paraValue"的Item 向select选项中加入一个Item 从select选项中删除一个Item 删除select中选中的项修改select选项中 value="paraValue"的text为"paraText" 设置s

jquery操作select(取值，设置选中）基础

每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector").val("pxx"); 2.设置text为pxx的项选中 $(".selector").find("option[text='pxx']").attr(&qu

jquery操作select大全详解

jqery对于select级联操作

问题:今天在做一个需求的时候,有一个级联操作也就是选中下拉框的一列就显示对对应的数据处理:我在做级联的时候在option的列里面绑定click的事件发现这个事件行不通:查资料发现select触发的是change事件.代码如下图所示: 通过select这个节点的val获取一个id值再通过id值进行判断就能很好的解决这种问题了. 以下内容转自网络以便学习总结: jqery对select的常用操作: jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id

jQuery获取Select选择的Text(非表单元素)和 Value（表单元素）(转)

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#selec

jQuery实现select级联