jQuery Mega Select List 可以利用設定或是 optgroup 來把原本呆板的下拉選單轉換成可以讓使用者一目了然且帶有標題的清單項目。
套件名稱:jQuery Mega Select List
套件版本:3.0.4
作者網站:http://www.stevefenton.co.uk/Content/Jquery-Mega-Select-List/
套件網址:N/A
發佈日期:2011-09-23
檔案大小:8.54 KB
檔案下載:jquery.megaselectlist.js
參數選項說明:
檢視原始碼 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 | classmodifier(選填) 描述: Mega Select List 所套用的 class 樣式,如果有命名衝突的話,可以透過此參數修改 預設值: "megaselectlist" headers(選填) 描述: 若沒有使用 optgroup 的話,則可指定標題來源 預設值: "rel" animate(選填) 描述: 設定選項是固定展開還是利用動畫方式展開;若設為 true 則會觸發後才展開 預設值: false animateevent(選填) 描述: 觸發選項展開的事件;要 animate 設為 true 才有效 預設值: "mouseover" multiple(選填) 描述: 是否允許多選 預設值: false maximumitems(選填) 描述: 當允許多選時,可指定最多可以選擇多少選項(設成 0 表示不限制) 預設值: 0 warningmessage(選填) 描述: 當多選的選項數量超出最多數量限制時的警告訊息 預設值: "You can only select {0} items" itemseparator(選填) 描述: 當多選時的每一項目的分隔符號 預設值: ", " hideloading(選填) 描述: 在載入時是否直接隱藏選項,若設為 false 則會先展開後再用動畫方式縮小隱藏 預設值: false isxhtml(選填) 描述: 設定是否使用 XHTML 的標準(主要差在 selected 屬性值的設定方式) 預設值: false |
方法說明:
檢視原始碼 JavaScript
1 2 | // 把指定的 select 轉換成 Mega Select List 效果 $(selector).megaselectlist(settings); |
使用範例:
檢視原始碼 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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.megaselectlist.js"></script> <style type="text/css"> /* Recommended styles */ .megaselectlistcolumn { width: 23%; /* 這會影響一次顯示幾列選項 */ margin: 0 1%; float: left; } .megaselectlist .currentitem { padding: 0; border: 0.1em dotted Green; color: Black; } /* Optional styles */ .megaselectlist { background-color: #F5F5F5; border: 1px solid Silver; } .megaselectlistcolumn > h2 { font-size: 1em; background-color: #ECECEC; text-align: center; padding: 2px 0; margin: 0; } .megaselectlist > p { margin: 0.2em; } .megaselectlistcolumn > ul { padding-left: 1em; margin: 0; color: Gray; } .megaselectlistcolumn > ul > li { cursor: pointer; padding: 0.1em; font-size: small; } .megaselectlistcolumn > ul > li:hover { background-color: #ECECEC; color: Black; } form { width: 600px; } </style> <script type="text/javascript"> $(function(){ // 把 #example1 轉換成 Mega Select List 效果 // 選項使用動畫方式展開並最多允許 3 個 $("#example1").megaselectlist({ animate: true, animateevent: "click", multiple: true, maximumitems: 3, warningmessage: "最多選擇 {0} 個項目", }); }); </script> <body> <form> <p> <label for="example1">請選擇</label> <select name="example1" id="example1"> <optgroup label="Link"> <option value="24">男丁格爾's 脫殼玩</option> <option value="25">jQuery</option> <option value="26">jQuery UI</option> <option value="27">jQuery Mobile</option> </optgroup> <optgroup label="Hampshire"> <option value="1">Andover</option> <option value="2">Alton</option> <option value="3">Basingstoke</option> <option value="4">Fareham</option> <option value="5">Portsmouth</option> <option value="6">Romsey</option> <option value="7">Southampton</option> <option value="8">Waterlooville</option> <option value="9">Winchester</option> </optgroup> <optgroup label="Dorset"> <option value="9">Blandford</option> <option value="10">Bournemouth</option> <option value="11">Christchurch</option> <option value="12">Ferndown</option> <option value="13">Poole</option> <option value="14">Verwood</option> <option value="15">Wareham</option> <option value="16">Weymouth</option> <option value="17">Wimbourne</option> </optgroup> <optgroup label="Wiltshire"> <option value="18">Devizes</option> <option value="19">Frome</option> <option value="20">Salisbury</option> <option value="21">Trowbridge</option> <option value="22">Warminster</option> <option value="23">Westbury</option> </optgroup> </select> </p> </form> </body> |
請問一下
如果我要將此頁的資料送到下一個網頁
我要如何取得全部選取的值呢?
謝謝