一、 檔案引入

jquery //jquery必須,且需要在chosen.js之前 
chosen.jquery.min.js //壓縮版的chosen核心jquery程式碼 
chosen.css //chosen 的樣式檔案

二 、程式碼示例

1 . html 程式碼

<select  class="chosen-select" data-placeholder="Choose a Country..." multiple> </select>

• 1

data-placeholder是將第一個option留空時預設顯示的內容。 
multiple 表示可以多選 
主要還是class=”chosen-select”（必須）

2 . js程式碼（初始化程式碼）

$(".chosen-select").chosen({
    no_results_text: "沒有找到結果！",//搜尋無結果時顯示的提示
    search_contains:true,   //關鍵字模糊搜尋，設定為false，則只從開頭開始匹配
    allow_single_deselect:true, //是否允許取消選擇
    max_selected_options:6  //當select為多選時，最多選擇個數
});$('.chosen-container-single').css("width","300px");（設定框寬度）

• 1
• 2
• 3
• 4
• 5
• 6

3 . 事件

　a) change事件：

$(".dept-select").chosen().change(function(){
    //do something...
});

• 1
• 2
• 3

　b) 當我們需要動態更新select下的選擇項時，只要在更新選擇項後觸發Chosen中的liszt:updated事件就可以了

//...$(".dept-select").html('...<option>部門6</option>...');
$(".dept-select").trigger("liszt:updated");

• 1
• 2

    c) 回顯（將下拉選value值回顯）

             $("#modal-gg-bj").val("");
             $("#modal-gg-bj").trigger("chosen:updated");
             $("#modal-gg-bj").val(id);
             $("#modal-gg-bj").trigger("chosen:updated");