一、 文件引入
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>
11data-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为多选时，最多选择个数
});| 选项 | 默认值 | 描述 |
|---|
| 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 | 多选框是否在下拉列表中显示已经选中的项 |
1234561234563 . 事件 a) change事件：
$(".dept-select").chosen().change(function(){
//do something...
});123123 b) 当我们需要动态更新select下的选择项时，只要在更新选择项后触发Chosen中的liszt:updated事件就可以了
//...$(".dept-select").html('...<option>部门6</option>...');
$(".dept-select").trigger("liszt:updated");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
对象作为参数。12
、4.chose监听事件通过在
<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 并隐藏搜索结果 |
$(document).ready(function () { // 如果要初始化已选中的项，需要在调用chosen()函数之前调用chose_mult_set_ini()函数 // 设置<select>的<option>属性selected=‘selected‘，这样chosen()函数被调用时，相应项会显示在框中 chose_mult_set_ini(‘#dl_chose2‘, ‘1,3,5,8‘); });5.属性可以通过在
<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 会读取这些属性 |
6.对齐方式选项文字默认是左对齐的，可以在class属性中加入“chzn-rtl”来设置右对齐：
?7.如果不想要搜索框的话，很简单，用css把它隐藏掉就OK了：
?
