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

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时才能看出效果
    });
});当然参数可以动态的获取并初始化