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>
类似资料：