jQuery实现select级联

最新推荐文章于 2023-02-01 11:58:35 发布

weixin_34395205

最新推荐文章于 2023-02-01 11:58:35 发布

阅读量127

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/makesense/p/7506242.html

版权

使用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>

转载于:https://www.cnblogs.com/makesense/p/7506242.html

weixin_34395205

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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.1...
复制链接

扫一扫