Chosen 是一个支持jquery的select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此，它更扩展了select，增加了自动筛选的功能。它可对列表进行分组，同时也可禁用某些选择项。
关于Jquery chosen的介绍（https://harvesthq.github.io/chosen/ ）：
Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.（chosen是一个jQuery插件：它会使冗长笨重的选择框变得更加的友好。）因为它有较多是介绍，以及相对比较全面的api，所以使用起来就相当方便。
百度网盘下载：https://pan.baidu.com/s/1Xyd0pygER3jJzFevn5gV4g （chosen_v1.8.7）
1.使用方法：
1）在页面中只需引入相应文件即可：
... <link href="chosen.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="chosen.jquery.js"></script> ...
2）在html中创建相应的select元素：
... <select data-placeholder="选择部门" style="width:150px;" class="dept_select" placeholder="请选择"> <option value="部门1">部门1</option> <option value="部门2">部门2</option> <option value="部门3">部门3</option> <option value="部门4">部门4</option> <option value="部门5">部门5</option> </select> ...
3）然后在script标签中初始化chosen标签：
jQuery(".dept_select").chosen();这样就完成了设置，是不是很简单，新来看看效果：
2.关于chosen的一些设置：
1）通过参数传递的选项
如：当搜索不到的时候，更改默认提示语
//匹配没有结果时的显示文字
$(".dept_select").chosen({
no_results_text:"没有找到",
allow_single_deselect:true
});以下参数在实例化的时候通过参数设置。
$('.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 | 多选框是否在下拉列表中显示已经选中的项 |
2）Chosen属性
可以通过在 <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 会读取这些属性
3）chosen监听的事件：
通过在 <select> 元素上触发特定事件可以调用 Chosen 的监听函数。
// tell Chosen that a select has changed
$('.my_select_box').trigger('chosen:updated');chosen:updated 通过js改变select元素选项时应该触发此事件，以更新chosen生成的选框;
chosen:active 相当于HTML 的focus事件（元素获得焦点时候的事件）;
chosen:open 激活chosen并显示搜索的结果。
chosen:close 关闭 Chosen 并隐藏搜索结果
（在对chosen的下拉框做数据初始化或者通过js给下拉框插入option之后都需要更新chosen）
4）chosen触发的事件：
Chosen 会在源 <select> 元素上触发事件。
jQuery('.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 搜索没有匹配时触发
5）其他问题：
1、当js更新select（改变选中项、添加option等）后，执行以下操作，用来更新chosen选框
$(".chosen-select").trigger("chosen:updated"); //$(".chosen-select")为select元素2、allow_single_deselect清空选中项 不起作用
select中必须有一个空的option，尤其是动态更新option的情况下，更新前后都要有一个空的option，否则不能正常显示清空图标
3、如果不想要搜索框的话，很简单，用css把它隐藏掉就OK了：
.chzn-container-single
.chzn-search {
display:
none;
}4、远程加载数据数据（例）：
jQuery.ajax({
url: '/information/information/citiesall',//这个url用来获取所有数据l
dataType: "json",
var html ='';
success: function (data) {
jQuery(".cid-select").chosen({maxHeight: 200});
for (var i = 0; i < data.length; i++) {
html+='<option value="'+result[i].id+'">'+result[i].name+'</option>'
}
jQuery(".cid_select").append(html);
}
});转载请注明： ITTXX.CN--分享互联网 » jQuery-Chosen插件、带自动搜索下拉的使用
最后更新：2018-10-18 17:41:49