| title | prev |
|---|---|
|
Chosen 選項列表
|
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 並隱藏搜索結果 |