jQuery實現select級聯

時間 2019-12-08
原文原文鏈接
使用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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。