chosen.jquery.js 插件的使用及总结

1. chosen插件简单的介绍：

Chosen 是select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。此外，还可以搜索查找下拉选项。它可对列表进行分组，同时也可禁用某些选择项。chosen.jquery.js 让你下拉框更简洁实用！

chosen插件依赖于jQuery库或者prototype，使用chosen插件之前要先引入jQuery或者prototype；

没有引入jquery，要先引入jquery（点击这里jquery线上引入以及下载链接）

chosen插件下载及使用教程：https://harvesthq.github.io/chosen/

chosen插件的选项介绍：https://harvesthq.github.io/chosen/options.html

chosen插件css线上cdn引入：

<link href=”https://cdn.bootcss.com/chosen/1.5.1/chosen.min.css” rel=’stylesheet ’/>

chosen插件线上cdn引入：

<script src=’https://cdn.bootcss.com/chosen/1.5.1/chosen.jquery.js’></script>

引入jquery和chosen插件，对需要美化的下拉框执行chosen函数：$(selector).chosen(options)；就可以把selector下拉框写成样式类，这样执行完chosen函数后，只要加上样式就可以了；

部分效果示例如下：
原单选下拉框：
使用chosen插件美化后的单选下拉框：

原多选下拉框：

使用chosen插件美化后的多选下拉框：

当然，chosen插件支持下拉框搜索：

2. chosen插件部分实用功能

隐藏单选搜索（如果有n个或更少的选项，则可以指定该选项以隐藏单选时的搜索输入）：

$(".chosen-select").chosen({disable_search_threshold: 10});

无结果文本支持（设置本文支持，当搜索下拉框时没有搜索到内容时的提示信息）：

$(".chosen-select").chosen({no_results_text:"没有搜索结果"});

限制多选中的选定个数（该参数限制用户可以选择的选项数量）：

$(".chosen-select").chosen({max_select_options: 5});

如果已经达到最大限制再次选择会触发事件：

$(".chosen-select").bind("chosen:maxselected",function(){·····});

允许在单选时取消选择（当前下拉框不是必选时，可以设置该元素取消选项，该配置只对第一个选项有空白文本时才有效）：

$(".chosen-select").chosen({allow_single_deselect: true});

支持下拉框从右到左的文本（默认为从左到右）：

$(“.chosen-select”).chosen({rtl: true});

监听值的改变（监听改变，选择或取消选择时，都会触发改变事件）：

$("#form_field").chosen.change(······);

摧毁选择恢复初始：

$("#form_field").chosen("destroy");

chosen自定义宽度：

$(".chosen-select").chosen({width:"95%"})；

3. chosen插件选项：

选项	默认	描述
allow_single_deselect	false	设置为true时有空白选项（值和文本都是空）的单选下拉框会显示清除选中的图标（X号）
disable_search	false	禁用下拉框搜索，设置为true时隐藏单选下拉框的搜索框
disable_search_threshold	0	禁用搜索框的阈值，当选项数量少于这个阈值时会隐藏搜索框
enable_split_word_search	true	是否开启分词搜索，默认开启
inherit_select_classes	false	是否继承select元素的class，如果设置为true，chosen将把select的class添加到列表上
max_selected_options	infinity	最多选项数，达到最大限制时会触发 chosen:maxselected事件
no_result_text	“No results match”	没有搜索到匹配项时的提示文字
placeholder_text_multiple	“Select Some Options”	多选框没有选中项时的占位文字
placeholder_text_single	“Select an Option”	单选框没有选中项时的占位文字
search_contains	false	模糊搜索，false表示从第一个字符开始匹配，true表示只要选项包含搜索词即可
single_backstroke_delete	true	多选下拉框中使用一次退格键即可删除选中项目。为true，点击一次退格键即可删除。为false第一次按delete/backspace会高亮要删除的项目，再按一次delete/backspace会删除该选项
group_search	true	下拉框内分组是否可搜索。false不可搜索，true可搜索
width	Original select width	Chosen生成的选择框宽度，默认值和原select宽度一致，设置值后会覆盖原select的宽度，如果执行chosen函数时下拉框还是隐藏的，必须设置width，否则下拉框设置为可见时宽度为0
display_disable_options	true	是否显示仅禁止选择的项目
display_selected_options	true	多选下拉框是否在下拉列表中显示已经选中的项。为false时下拉列表不显示已经选中的选项，为true时下拉列表会显示选中的选项，但会用特殊的样式标识。这个配置对单选下拉框无效
include_group_lable_in_selected	false	选中选项是否显示选项分组。false不显示，true显示。默认为false
max_shown_results	infinity	搜索结果最大显示数量。数量设置的小，可以提高速度
case_sensitive_search	false	搜索大小写敏感。为false大小写不敏感，为true大小写敏感
hide_result_on_select	true	搜索结果隐藏已选中的选项，只对多选下拉框有效。为true表示隐藏，为false表示不隐藏
rtl	false	文字方向是否改为从右向左。true表示文字方向从右向左，false表示从左向右

3. chosen插件监听事件：

chosen会在源<select>元素上监听事件。

$(‘.chosen’).on(‘change’,function(e,params)){ do_something(e,params); });

注意：所有Chosen自定义事件都包含Chosen实例。chosen对象作为参数。

选项	描述
change	chosen触发标准的change事件，同时会传递selected或者deselected参数，方便用户获取改变的选项
chosen：ready	chosen实例化完成时触发
chosen：maxselected	超过max_selected_options设置时触发，也就是多选下拉框选择数量超过设置的限制
chosen：showing_dropdown	chosen下拉框打开完成时触发
chosen：hiding_dropdown	chosen下拉框关闭完成时触发
chosen：no_results	搜索没有匹配结果时触发

chosen触发的事件：
通过在源元素上触发特定的事件：
$('.chosen').trigger('chosen:update');

选项	描述
chosen：updated	通过JS改变select元素选项时触发此事件，以更新chosen生成的选框
chosen：activate	相当于HTML的focus事件，focus事件:当元素获得焦点时，触发事件
chosen：open	激活Chosen并显示搜索结果
chosen：close	关闭Chosen并隐藏搜索结果

4. 对于select的一些使用操作：

设置chosen下拉框中的选项内容：

//设置下拉框选项内容
$(selectId).html(change_options);
//需要执行trigger方法，才会生效
$(selectId).trigger("chosen:updated");

设置chosen选中某项：

//设置选中第几项
$(selectId).get(0).selectedIndex=i;
//需要执行trigger方法，才会生效
$(selectId).trigger("chosen:updated");//需要执行change()方法，才会触发onChange事件
$(selectId).change();

设置select内容：

清空select：

$("#select").empty();

设置select选项：

$("#select").html();

获取select的相关内容：

获取select选中的value：

$("#select").val();

获取select选中的text：

$("#select").find("option:selected").text();

获取select选中的索引：

$("#select").get(0).selectedIndex;

设置select选中某一项：

html页面代码：

<div><select id="class_select"><option value="1">1901</option><option value="2">1902</option><option value="3">1903</option><option value="4">1904</option><option value="5">1905</option></select>
</div>

根据value值选中某一项：

$("#class_select option[value='2']").attr("selected","selected");
$("$class_select option[value='2']").attr("selected",true);
$("#class_select").val("2");
$("#class_select").get(0).value = '1';

以下两种方式只在jquery低于1.4.2（包含）中有效，在高版本内无效：

根据索引值选中某一项（i 为索引值 这里注意索引值从0开始）：

$("class_select").get(0).selectedIndex=i;
$("class_select").get(0).options[i].selected=true;

根据text值选中某一项：

$("#class_select option[text='1902']").attr("selected",true);
$("#class_select").find(option[text="1902"]).attr("selected",true);

高版本jquery也可以使用下列方法：

精确匹配，判断text值和给定字符串一致：

$("class_select option").filter(function(){return $(this).text()=="1902";}).attr("selected",true);

选择文本包含给定字符串的option：

$("class_select option:contains('1902')").attr('selected',true);

操作select的option选项

在尾部添加一项option：

$("#class_select").append("<option value='value'>text</option>");

在头部添加一项option：

$("#class_select").prepend("<option value='0'>--请选择--</option>");

删除最后一项option（根据索引删除，删除索引值最大的那一个）：

$("#class_select option:last").remove();

删除索引值为3的option：

$("#class_select option[index='3']").remove();

删除value值为3的option：

$("class_select option[value='3']").remove();

删除text值为1903的option：

$("class_select option[text='1903']").remove();

5.chosen插件引用示例：

//js 插件引用示例
$(function () {$('.chosen').chosen({no_results_text: "没有找到结果！",//搜索无结果时显示的提示  search_contains: true,   //关键字模糊搜索。设置为true，只要选项包含搜索词就会显示；设置为false，则要求从选项开头开始匹配allow_single_deselect: true, //单选下拉框是否允许取消选择。如果允许，选中选项会有一个x号可以删除选项disable_search: false, //禁用搜索。设置为true，则无法搜索选项。disable_search_threshold: 0, //当选项少等于于指定个数时禁用搜索。inherit_select_classes: true, //是否继承原下拉框的样式类，此处设为继承placeholder_text_single: '选择地区', //单选选择框的默认提示信息，当选项为空时会显示。如果原下拉框设置了data-placeholder，会覆盖这里的值。width: '168px', //设置chosen下拉框的宽度。即使原下拉框本身设置了宽度，也会被width覆盖。max_shown_results: 100, //下拉框最大显示选项数量display_disabled_options: false,single_backstroke_delete: false, //false表示按两次删除键才能删除选项，true表示按一次删除键即可删除case_sensitive_search: false, //搜索大小写敏感。此处设为不敏感group_search: false, //选项组是否可搜。此处搜索不可搜include_group_label_in_selected: true //选中选项是否显示选项分组。false不显示，true显示。默认false。});$('.chosen2').chosen({search_contains: false,enable_split_word_search: true //分词搜索，选项词可通过空格或'[]'分隔。search_contains为false时才能看出效果});
});当然参数可以动态的获取并初始化

chosen.jquery.js 插件的使用和总结相关推荐

【jquery】Chosen.jquery.js 插件动态加载数据问题
Chosen.jquery.js目前版本v1.6.2,官方文档链接https://harvesthq.github.io/chosen/ 插件有一个css文件和一个js文件,都命名为Chosen,引入 ...
chosen.jquery.js 有搜索功能、多选功能的下拉框插件
chosen.jquery.js 有搜索功能.多选功能的下拉框插件官方源码: https://github.com/harvesthq/chosen 该源码中的样例index.html有该插件的详 ...
有搜索功能的下拉框chosen.jquery.js适配手机端
在实现动态生成下拉框数据的时候接触到了一个好用的js插件chosen.jquery.js,但是在使用的过程中发现在浏览器中是好用的,能够完美的实现功能,浏览器端界面如下图所示: 但是在做微信工众号的时 ...
chosen.jquery.js 初始化选中多个单个以及其他一些操作
1.引入css库,JQ库,以及chosen.jquery.js <link href='https://cdn.bootcss.com/chosen/1.5.1/chosen.min.css' ...
chosen.jquery.js 、chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值，chosen 实现远程搜索加载下拉选项
chosen.jquery.js .chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值,chosen 实现远程搜索加载下拉选项 chosen. ...
jquery常见插件用法表
一:美化select表单:chosen.jquery.js http://harvesthq.github.io/chosen/ 关于ajax更新列表后需要触发下插件的事件,才会表现出来:(http: ...
jquery.autocomplete.js 插件的自定义搜索规则
这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足! 问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下 ...
利用jquery的qrcode.js插件生成二维码的两种方式的使用
2019独角兽企业重金招聘Python工程师标准>>> 利用jquery的qrcode.js插件生成二维码的额两种方式,canvas(即画布)方式和table方式(原文地址http: ...
jquery.validate.js插件的使用方法
近期做项目.须要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [样例例如以下] 1.前台页面 <form id="form1" ...

chosen.jquery.js 插件的使用和总结