Chosen

前言：

想要達到下拉框有多選的情況。

過程：

1.因為本次工作項目使用的是surperUI，而它則是基於bootstrap框架搭建而成的。於是自然而然的就想到了使用bootstrap中的select插件。可是因為不太熟悉該框架的使用方法，於是看了一下使用方法，就上手寫代碼了。知道最終研究細節時，才發現出現了一些問題：

首先，不會取到select的value值；其次，不會回顯其值。反復考量之后，才決定摒棄這哥熟知的方法，而選擇另外一款方便好用的插件——Jquery chosen。

2.關於Jquery 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元素：

...
<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>
...

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.遠程加載數據數據（例）：

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

6.chosen jQuery在表單提交的時候，會默認將value提交到后台，這樣就方便我們進行后續的操作了，但是它本身又存在一個不完美的地方：在自己成功在數據庫保存好數據后，再回顯的時候，卻不知道應該怎樣給它來賦值。於是想了很多類似的插件：easyui的賦值方式或者類似於input的賦值，但是均以失敗告終，無奈之下，我們只能自己寫方法來給它定義賦值的方法，暫且就當做公共方法使用，這樣基本上用到的人都能感受到它的便利。以下便是進行封裝過的插件，如果再單頁面中使用的話，只需要把它代入具體的js中即可。

//找到多選標簽的對象
 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);
    };

 

***:這里，特別提出的一點是：在給下拉框賦值的過程中，

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

第一種是原生的清空select，第二種則是chosen自帶的清空，只有這兩種合在一起，才會達到清空原有下拉框值的效果。之前在網上看過很多關於chosen的介紹，關於如何清空下拉框的介紹時，總是欠缺那么一點完美，直到自己開始做的時候，才發現原來這真的有點小糾結，不過還好，最終還是達到了預期的效果。