chosen插件引入、初始化、取val、取text、赋值

开淦

一、引入

jquery.min.js（插件依赖jq）、chosen.jquery.js、chosen.css（chosen.min.css）
官方下载地址：
chosen：（https://harvesthq.github.io/chosen/）
jq：（下载地址）
别忽略图片了（chosen-sprite.png）就是这个玩意，不想改源码就放在css文件目录下，其实没有它也行 比如你想做一个这种功能，再次点击就会清除该选项，你只需要修改对应的样式宽高设置100%即可

源码在这：

二、初始化

没啥说的 对照官方参数填

<select id="opetype2" class='chosen w-country' data-placeholder='请选择地区' multiple style="outline: none; margin-right: 10px;">
  <option value="亳州">亳州</option>
  <option value="池州">池州</option>
  <option value="滁州">滁州</option>
  <option value="黄山">黄山</option>
  <option value="芜湖">芜湖</option>
  <option value="宣城">宣城</option>
</select>

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

三、取值

取val值

//取val值
$('#opetype2').on('change', function (e，params) {
    params.citys = $("#opetype2").val(); // 得到数组
});
$("#opetype2").chosen().change(function(){
    //do something...
});都可以
// e是chosen的实例，params额。没用过

取text

$("#opetype2 option:selected").text()

也许你对得到的数据很头疼 你可以考虑利用正则或者把text原本值后加空格 以便更好切割（阿巴）（阿巴）

四、赋值

赋值请求回来的值

var data = [1,2,3,4]
$("#opetype2").val(data);
$("#opetype2").trigger("chosen:updated");
//改变的optiones的值（就是你的下拉框内容）

五、清空

清空select

$("#opetype2").empty(); //原生清空
$("#opetype2").chosen("destroy");//插件自带
//一起用才完美
可能出现的问题：有时清空不起作用，你可能需要在下拉框中添加一个空的option并习惯放在第一位