jquery插件chosen的使用

一、 文件引入

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");