Chosen 可以把基本的下拉選單轉換成類似 Facebook 的下拉選單的外掛套件。除了再選取時可以利用搜尋的功能之外,多選時能在每個已選擇的選項旁加上 x 鈕,讓使用者可以快速的移除。
下拉選單的提示來源是 data-placeholder 屬性,若沒提供的話,則單選預設是 "Select an Option",而多選則是 "Select Some Options"。另外,因為 Chosen 會把第一個選項當成預設,所以請務必把第一個選項設成空白的值。
套件名稱:Chosen
套件版本:0.9.8
作者網站:http://harvesthq.github.com/chosen/
套件網址:N/A
發佈日期:2012-03-12
檔案大小:33.6 KB
檔案下載:chosen.jquery.js chosen.css
參數選項說明:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | allow_single_deselect(選填) 描述: 是否允許單選時能直接刪除選擇 預設值: false disable_search_threshold(選填) 描述: 如果選項少於此值時就顯示搜尋輸入框 預設值: 0 search_contains選填) 描述: 搜尋條件是否使用模糊查詢 預設值: false no_results_text(選填) 描述: 當搜尋不到任何結果時顯示的訊息內容 預設值: "No results match" |
方法說明:
檢視原始碼 JavaScript
1 2 3 4 5 | // 把指定的下拉選單轉換成 chosen 效果 $(selector).chosen(options); // 更新選單 $(selector).trigger("liszt:updated") |
使用範例:
檢視原始碼 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 | <link type="text/css" rel="stylesheet" href="chosen.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="chosen.jquery.js"></script> <script type="text/javascript"> $(function(){ // 轉換成 chosen 效果 $(".chzn-select").chosen(); // 轉換成 chosen 效果並允許單選時能直接刪除選擇 $(".chzn-select-deselect").chosen({ allow_single_deselect: true }); }); </script> <body> <h3>單選</h3> <select data-placeholder="選擇你喜歡的課程" class="chzn-select" style="width:200px;"> <option value=""></option> <option>國文</option> <option>英文</option> <option>統計</option> <option>微積分</option> <option selected>體育</option> <option>會計</option> <option>經濟</option> <option>園遊會</option> </select> <h3>多選</h3> <select data-placeholder="選擇你喜歡的課程" class="chzn-select" multiple style="width:350px;"> <option value=""></option> <option>國文</option> <option>英文</option> <option>統計</option> <option>微積分</option> <option selected>體育</option> <option>會計</option> <option>經濟</option> <option>園遊會</option> </select> <h3>讓單選也能直接刪除</h3> <select data-placeholder="選擇你喜歡的課程" class="chzn-select-deselect" style="width:200px;"> <option value=""></option> <option>國文</option> <option>英文</option> <option>統計</option> <option>微積分</option> <option selected>體育</option> <option>會計</option> <option>經濟</option> <option>園遊會</option> </select> </div> </body> |
圖片檔案:
老師:
若是要在下拉的內容限制高度讓它出現bar,要如何修改呢?
已經試出來了!
不用再麻煩老師了!
自己解答了, 也可以分享出來給其它遇到同樣問題的人喔!!
請問老師,在搜尋關鍵字那裡,是否可以改為像是like 的方式,只要有就出來而不是只比對第一個字。
是修改
AbstractChosen.prototype.set_default_values = function()
是修改這裡就行了嗎?
設定 search_contains 為 true 就可以了
請問老師 如果我把這個跟資料庫做連結 那我把資料從資料庫抓出來 該如何讓他以這種方式出現?
就是..如果我選擇 國文 又選擇英文 寫進資料庫變成 1,2 那抓出來 該怎麼讓它選定已經選的項目?
老師~
這個範例是不是掛掉了~好像看不到效果了耶
請先下載範例檔案後, 把 jQuery 的引用改成 1.9 以下的版本就可以了!!
請問送出的值可以跟選擇時的順序一樣嗎?例如
國文
英文
統計
微積分
我先選了英文、國文、統計、微積分這樣的順序,但它送出值的順序卻還是國文、英文、統計、微積分,另外可以在值與值中間加入","嗎?
找了好久不知道在哪邊改,謝謝。