chosen 下拉框

    $("#teams").trigger("liszt:updated");//更新重新綁定
                            $("#teams").chosen(）

Chosen 選項列表  地址：
https://github.com/amazeui/chosen/blob/master/docs/options.md

demo.html

Chosen 選項列表

---

通過參數傳遞的選項

以下參數在實例化的時候通過參數設置。

$('.my_select_box').chosen({ disable_search_threshold: 10, no_results_text: 'Oops, nothing found!', width: '95%' });

選項	默認值	描述
allow_single_deselect	false	設置為 true 時非必選的單選框會顯示清除選中項圖標
disable_search	false	設置為 true 隱藏單選框的搜索框
disable_search_threshold	0	少於 n 項時隱藏搜索框
enable_split_word_search	true	是否開啟分詞搜索，默認開啟
inherit_select_classes	false	是否繼承 select 元素的 class，如果設為 true，Chosen 將把 select 的 class 添加到容器上
max_selected_options	Infinity	最多選擇項數，達到最大限制時會觸發 chosen:maxselected 事件
no_results_text	"No results match"	沒有搜索到匹配項時顯示的文字
placeholder_text_multiple	"Select Some Options"	多選框沒有選中項時顯示的占位文字
placeholder_text_single	"Select an Option"	單選框沒有選中項時顯示的占位文字
search_contains	false	搜素包含項，默認從第一個字符開始匹配
single_backstroke_delete	true	多選框中使用退格鍵刪除選中項目，如果設為 false，第一次按 delete/backspace 會高亮最好一個選中項目，再按會刪除該項
width	Original select width.	Chosen 生成的選擇框寬度，默認為和原 select 寬度保持一致
display_disabled_options	true	是否顯示禁止選擇的項目
display_selected_options	true	多選框是否在下拉列表中顯示已經選中的項

屬性

可以通過在 <select> 上設置屬性傳遞給 Chosen。

<select class="my_select_box" data-placeholder="Select Your Options"> <option value="1">Option 1</option> <option value="2" selected>Option 2</option> <option value="3" disabled>Option 3</option> </select>

屬性	描述
data-placeholder	占位符文字 注意： 改屬性會覆蓋 placeholder_text_multiple 或 placeholder_text_single 選項。
multiple	有此屬性的 select 會渲染成可以多選的 Chosen 選框
selected, disabled	設置選中、禁止狀態，Chosen 會讀取這些屬性

觸發事件

Chosen 會在源 <select> 元素上觸發事件。

$('.my_select_box').on('change', function(e, params) { do_something(e, params); });

事件	描述
change	Chosen 觸發標准的 change 事件，同時會傳遞 selected or deselected 參數， 方便用戶獲取改變的選項
chosen:ready	Chosen 實例化完成時觸發
chosen:maxselected	超過 max_selected_options 設置時觸發
chosen:showing_dropdown	Chosen 下拉選框打開完成時觸發
chosen:hiding_dropdown	Chosen 下拉選框關閉完成時觸發
chosen:no_results	搜索沒有匹配項時觸發

注意：所有 Chosen 自定義事件 都包含 Chosen 實例 chosen 對象作為參數。

Chosen 監聽的事件

通過在 <select> 元素上觸發特定事件可以調用 Chosen 的監聽函數。

// tell Chosen that a select has changed
$('.my_select_box').trigger('chosen:updated');

事件	描述
chosen:updated	通過 JS 改變 select 元素選項時應該觸發此事件，以更新 Chosen 生成的選框
chosen:activate	相當於 HTML focus 事件
chosen:open	激活 Chosen 並顯示搜索結果
chosen:close	關閉 Chosen 並隱藏搜索結果