jquery chosen插件的使用(搜索查询下拉列表，多选)

待我称王封你为后i 2022-05-23 08:00 714阅读 0赞

# [Chosen][] #

**前言：**

想要达到下拉框有多选的情况。

**过程：**

1.因为本次工作项目使用的是surperUI，而它则是基于bootstrap框架搭建而成的。于是自然而然的就想到了使用bootstrap中的select插件。可是因为不太熟悉该框架的使用方法，于是看了一下使用方法，就上手写代码了。知道最终研究细节时，才发现出现了一些问题：

首先，不会取到select的value值；其次，不会回显其值。反复考量之后，才决定摒弃这哥熟知的方法，而选择另外一款方便好用的插件——Jquery chosen。

2.关于Jquery chosen的介绍（[https://harvesthq.github.io/chosen/][https_harvesthq.github.io_chosen]）：

Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.（chosen是一个jQuery插件：它会使冗长笨重的选择框变得更加的友好。）

因为它有较多是介绍，以及相对比较全面的api，所以使用起来就相当方便。比如：

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元素：

![复制代码][copycode.gif]

...
    <select name="cidt" style="width:150px;" id="cid" class="cid_select" placeholder="请选择">
        <option value="1">西安</option>
        <option value="">厦门</option>
        <option value="3">成都</option>
        <option value="4">重庆</option>
        <option value="5">南宁</option>
    </select>
    ...

![复制代码][copycode.gif]

3）然后在script标签中初始化chosen标签：

jQuery(".cid-select").chosen();

——————————————————————————————————————————————

4.关于chosen的一些设置：

1）当搜索不到的时候，更改默认提示语：

//匹配没有结果时的显示文字
        $(".cid-select").chosen({
            no_results_text:"没有找到", 
            allow_single_deselect:true
        });

2）chosen监听的事件：

a.chosen:update 通过js改变select元素选项时应该触发此事件，以更新chosen生成的选框；

b.chosen:active 相当于HTML 的focus事件（元素获得焦点时候的事件）;

c.chosen:open 激活chosen并显示搜索的结果。

\*\*\*（在对chosen的下拉框做数据初始化或者通过js给下拉框插入option之后都需要更新chosen）

//通过在 <select> 元素上触发特定事件可以调用 Chosen 的监听函数。
    
    // tell Chosen that a select has changed
    $('.cid-select').trigger('chosen:updated');

4）chosen触发的事件：

jQuery('.cid-select).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.远程加载数据数据（例）：

![复制代码][copycode.gif]

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);
                     }
                 });

![复制代码][copycode.gif]

6.chosen jQuery在表单提交的时候，会默认将value提交到后台，这样就方便我们进行后续的操作了，但是它本身又存在一个不完美的地方：在自己成功在数据库保存好数据后，再回显的时候，却不知道应该怎样给它来赋值。于是想了很多类似的插件：easyui的赋值方式或者类似于input的赋值，但是均以失败告终，无奈之下，我们只能自己写方法来给它定义赋值的方法，暂且就当做公共方法使用，这样基本上用到的人都能感受到它的便利。以下便是进行封装过的插件，如果再单页面中使用的话，只需要把它代入具体的js中即可。

![复制代码][copycode.gif]

//找到多选标签的对象
     chosenSetValues($modal.find('select[name="' + name + '"]'),row[name],option.select_chosen)
    
    //----------------------------------------------
        /**
         * chosen多选框
         * @param $elm
         * @param row
         * @param option
         */
        var chosenSetValues=($elm,datas,option={})=>{
            option=$.extend({},{width: '370px', no_results_text:'无结果匹配！'},option);
            var url=$elm.attr('data_url')||option.url;
            if(url){
                $.post(url, (result)=> {
                    _chosenSetValues($elm,result,datas,option)
                },'json');
            }else{
                var tempArr=[];
                $elm.children('option').each(function () {
                    tempArr.push({id:$(this).attr('value'),name:$(this).text()})
                });
                _chosenSetValues($elm,tempArr,datas,option)
            }
        };
        var _chosenSetValues =($elm,result,datas,option)=>{
            var html='';
            var flag=false;
            $elm.empty();
            $elm.chosen("destroy");
            if(typeof datas ==='string'){
                if(datas.length==0){
                    datas=[];
                }else{
                    datas =datas.split(',');
                }
            }
            for(var i=0;i<result.length;i++){
                for(var j=0;j<datas.length;j++){
                    if(datas[j]==result[i].id) flag=true;
                }
                if(flag){
                    html+="<option value="+result[i].id+" selected >"+result[i].name+"</option>";
                    flag=false;
                }else{
                    html+="<option value="+result[i].id+">"+result[i].name+"</option>"
                }
            }
            $elm.append(html);
            //设置未找到时的显示文字
            $elm.chosen(option);
        };

![复制代码][copycode.gif]

\*\*\*:这里，特别提出的一点是：在给下拉框赋值的过程中，

$elm.empty();
    $elm.chosen("destroy");

第一种是原生的清空select，第二种则是chosen自带的清空，只有这两种合在一起，才会达到清空原有下拉框值的效果。之前在网上看过很多关于chosen的介绍，关于如何清空下拉框的介绍时，总是欠缺那么一点完美，直到自己开始做的时候，才发现原来这真的有点小纠结，不过还好，最终还是达到了预期的效果。

![934768-20170401160516289-408382077.gif][]

一、Chosen 选项列表

--------------------

## 通过参数传递的选项 ##

以下参数在实例化的时候通过参数设置。

$('.my_select_box').chosen({
      disable_search_threshold: 10, no_results_text: 'Oops, nothing found!', width: '95%' });

<table style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(238,238,238);border-spacing:0px;width:852px;margin:0px;padding:0px;border:1px solid rgb(192,192,192);color:rgb(0,0,0);"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="margin:0px;padding:0px;"> 
   <th style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">选项</th> 
   <th style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">默认值</th> 
   <th style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">描述</th> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">allow_single_deselect</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">false</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">设置为&nbsp;<code style="font-size:14px;line-height:22px;margin:0px;padding:0px;">true</code>&nbsp;时非必选的单选框会显示清除选中项图标</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">disable_search</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">false</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">设置为&nbsp;<code style="font-size:14px;line-height:22px;margin:0px;padding:0px;">true</code>&nbsp;隐藏单选框的搜索框</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">disable_search_threshold</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">0</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">少于&nbsp;<code style="font-size:14px;line-height:22px;margin:0px;padding:0px;">n</code>&nbsp;项时隐藏搜索框</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">enable_split_word_search</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">true</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">是否开启分词搜索，默认开启</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">inherit_select_classes</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">false</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">是否继承 select 元素的 class，如果设为&nbsp;<code style="font-size:14px;line-height:22px;margin:0px;padding:0px;">true</code>，Chosen 将把 select 的 class 添加到容器上</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">max_selected_options</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">Infinity</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">最多选择项数，达到最大限制时会触发&nbsp;<code style="font-size:14px;line-height:22px;margin:0px;padding:0px;">chosen:maxselected</code>&nbsp;事件</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">no_results_text</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">"No results match"</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">没有搜索到匹配项时显示的文字</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">placeholder_text_multiple</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">"Select Some Options"</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">多选框没有选中项时显示的占位文字</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">placeholder_text_single</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">"Select an Option"</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">单选框没有选中项时显示的占位文字</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">search_contains</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">false</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">搜素包含项，默认从第一个字符开始匹配</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">single_backstroke_delete</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">true</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">多选框中使用退格键删除选中项目，如果设为&nbsp;<code style="font-size:14px;line-height:22px;margin:0px;padding:0px;">false</code>，第一次按 delete/backspace 会高亮最好一个选中项目，再按会删除该项</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">width</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">Original select width.</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">Chosen 生成的选择框宽度，默认为和原 select 宽度保持一致</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">display_disabled_options</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">true</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">是否显示禁止选择的项目</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;"> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">display_selected_options</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">true</td> 
   <td style="padding:3px;margin:0px;border-color:rgb(192,192,192);border-collapse:collapse;">多选框是否在下拉列表中显示已经选中的项</td> 
  </tr> 
 </tbody> 
</table>

## 二、属性 ##

可以通过在 `<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>

## 三、触发事件 ##

Chosen 会在源 `<select>` 元素上触发事件。

$('.my_select_box').on('change', function(e, params) { do_something(e, params); });

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

## 四、Chosen 监听的事件 ##

通过在 `<select>` 元素上触发特定事件可以调用 Chosen 的监听函数。

// tell Chosen that a select has changed
    $('.my_select_box').trigger('chosen:updated');

## 五、几个常规问题及用法 ##

1、当js更新select（改变选中项、添加option等）后，执行以下操作，用来更新chosen选框

$(".chosen-select").trigger("chosen:updated");  //$(".chosen-select")为select元素

2、allow\_single\_deselect清空选中项 不起作用

select中必须有一个空的option，尤其是动态更新option的情况下，更新前后都要有一个空的option，否则不能正常显示清空图标

来源：https://blog.csdn.net/wangxiuyan0228/article/details/79419937

https://www.cnblogs.com/zhengyeye/p/6628460.html

[Chosen]: https://www.cnblogs.com/zhengyeye/p/6628460.html
[https_harvesthq.github.io_chosen]: https://harvesthq.github.io/chosen/
[copycode.gif]: /images/20220523/8bd925f9d3be4f8d80185b76a1b4ca95.png
[934768-20170401160516289-408382077.gif]: /images/20220523/739455cf45ed4ba6a986fa372d422d51.png