jQuery实现select级联

Posted 天琊蓝

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

以上是关于jQuery实现select级联的主要内容,如果未能解决你的问题,请参考以下文章

JQuery和ASP.NET分别实现级联下拉框效果

级联菜单

JS与Jquery之动态添加下拉框select并级联改变事件

利用jquery.chained.remote实现多级级联

jQuery+ajax实现级联查询

使用json 和jQuery制作级联dropdownlist