[JavaScript知识库]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插件选项：

3. chosen插件监听事件：

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

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

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

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

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