doubleSelect 從名稱就知道它是讓下拉選單連動的套件,我們只要設定好 JSON 格式的資料就可以使用了。雖然能做到多個下拉選單連動,不過就設定看來是會很繁瑣的!
套件名稱:jQuery doubleSelect Plugin
套件版本:1.2
作者網站:http://www.jgeppert.com/jquery-doubleselect/
套件網址:http://plugins.jquery.com/project/doubleselect
發佈日期:2009-07-23
檔案大小:4.61 KB
檔案下載:jquery.doubleSelect.js
參數說明:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | preselectFirst(選填) 描述: 第一個下拉選單預設選擇的項目 預設值: null preselectSecond(選填) 描述: 第二個下拉選單預設選擇的項目 預設值: null emptyOption(選填) 描述: 是否允許空白的選項 預設值: false emptyKey(選填) 描述: 空白選項的預設值 預設值: -1 emptyValue(選填) 描述: 空白選項的文字內容 預設值: 'Choose ...' |
方法說明:
檢視原始碼 JavaScript
1 2 | // 幫指定的下拉選單加上連動的功能 $(selector).doubleSelect(doubleid, values, options); |
使用範例:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.doubleSelect.js"></script> <style type="text/css"> select { width: 100px; border: 2px solid #666; margin: 2px; } </style> <script type="text/javascript"> $(function(){ // 設定連動選單的參數 // 預設先選擇"水果"中的"榴槤" // 允許空值選項, 顯示的內容為 "...", 值為 "" var options = { preselectFirst : 20, preselectSecond : 999, emptyOption: true, emptyValue: "...", emptyKey: "" }; // 設定連動選單的選項資料 var selectOptions = { "蔬菜": { "key" : 10, "defaultvalue" : 111, "values" : { "蕃茄": 110, "馬鈴薯": 111, "波菜": 112 } }, "水果": { "key" : 20, "defaultvalue" : 212, "values" : { "蘋果": 210, "柳丁": 211, "奇異果": 212, "木瓜": 213, "榴槤": 999 } } }; // 產生連動選單的功能 $('#first').doubleSelect('second', selectOptions, options); }); </script> <body> <div> <label for="first">First Select Box :</label> <select id="first" name="first" size="1"> <option value="">--</option> </select> </div> <div> <label for="second">Second Select Box :</label> <select id="second" name="second" size="1"> <option value="">--</option> </select> </div> </body> |
請問,
first 的 select 如果超過2個,是不是就沒作用了?
例如除了 蔬菜、水果再加 "麵包"...第3、4...個選項
有沒有辦法將 first 的 select 選項增加到2個以上?
謝謝!!
目前看來應該是不支援多選啦..
至於3, 4..以上的連動的話, 應該是可以再多套用幾次 doubleSelect() 就可以了