類select下拉：多選+搜尋

最近做項目需要實作一個可以多選、搜尋的、可下拉的select功能，類似下圖，我在項目裡試過的插件有bootstrap-select、chosen、select2

• 由于項目架構的限制我放棄了bootstrap-select，由于我們也使用了bootstrap，插件裡面的bootstrap版本(3.0)和我們用的版本不同，加上之前的前端把bootstrap.css改了好多，修改相容難度比較大，就放棄了這個，這個界面是三個裡面最舒服的。

  

  基礎用法我也附上一些供大家參考：

<select class="form-control col-md-2 selectpicker" multiple data-live-search="true" id="drugFromId">

        $("#drugFromId").selectpicker({
            noneSelectedText : '所有種類',//預設顯示内容，不設定會顯示英文
            noneResultsText : '未查詢到',//查詢不到比對的内容顯示的内容，不設定會顯示英文
        });

        var result = $.parseJSON(data.content);
        $.each(result, function(index, item) {
            // 選中cookie中傳來的值
            if (item.drugId == drugFromId) {
                $("#drugFromId").append(
                        "<option value='" + item.drugId
                                + "' selected='selected'>"
                                + item.drugGeneralName + "</option>");
            } else {
                $("#drugFromId").append(
                        "<option value='" + item.drugId + "'>"
                                + item.drugGeneralName + "</option>");
            }

        });
        $('#drugFromId').selectpicker('refresh');
        $('#drugFromId').selectpicker('render');
           

還有需要注意的一點是，如果不是引入的網上的位址連結，本地引入css、js之後記得把font檔案也引進去，不然有些icon會失效。

官網位址：http://silviomoreto.github.io/bootstrap-select/

• chosen的問題是：什麼都設定了，但就是多選死活不能搜尋！！！

  單選的時候都對，一換成多選，就諸多問題：沒有初始高度、沒有預設初始值、無法實作搜尋功能……淚目、心塞

  

  初始狀态是錯的，但是一有選中值，就對了，但是搜尋功能始終沒有

  

  一些基礎設定為：

引入chosen.css\chosen.js\[email protected]、chosen-sprite.png

<select class="form-control col-md-2" multiple data-placeholder='請選擇' id="drugFromId">
$('#drugFromId').chosen({
    no_results_text:"未查詢到",
    allow_single_deselect:true,//是否允許取消選擇
    search_contains:true,//模糊查詢
    disable_search: false,//禁用搜尋。設定為true，則無法搜尋選項[單選時]。
    placeholder_text_multiple:'請選擇'//多選框沒有選中項時顯示的占位文字

});
           

還有需要注意的一點是，要想顯示出預設文字，select下的第一個選擇項必須為空的option。

學習位址參考：https://harvesthq.github.io/chosen/

有位同志我感覺寫的挺全的：https://blog.csdn.net/c11073138/article/details/79462156

• select2

  官網位址：https://select2.org/

  學習參考位址：https://blog.csdn.net/wengedexiaozao/article/details/83753825

  使用的時候引入css、js即可，多選在标簽上加multiple=“multiple”

1、初始化

$('select[name="drugFromSelect"]').select2({
        placeholder:"可多選",//預設值
        allowClear: true,//允許全部删除
    })

           

2、取值

$(function(){
	//取值
		$('select[name="drugFromSelect"]').change(function(){
             var op=$('select[name="drugFromSelect"] option');
             var allId="",allDrug="";
             for(var i=0;i<op.length;i++){
                 if(op[i].selected){
                     allId+=$(op[i]).val()+",";
 					 allDrug+=$(op[i]).text()+",";
                 }
             }
             allId = allId.substr(0, allId.length - 1);//去掉末尾的逗号
             allDrug = allDrug.substr(0, allDrug.length - 1);//去掉末尾的逗号   
         })
})
           

3、指派

select2把select标簽畫成了别的的東西，正常的select對象被jquery藏了起來，

是以修改值的時候使用dom對象的觸發器才行。

$('select[name="drugFromSelect"]').select2();
var arrM=['79078','80431'];  [val就是option的value]
$('select[name="drugFromSelect"]').val(arrM).trigger('change');//多選
$('select[name="drugFromSelect"]').val('30901').trigger('change');//單選
           

要是設定預設顯示值，就可以直接寫那項的value即可，比如：

$("#drugFromId").append("<option value='-1'>所有種類</option>");
$('select[name="drugFromSelect"]').val('-1').trigger('change');
           

或者清空選擇項：

$('select[name="drugFromSelect"]').val(" ").trigger('change');
           

4、這個删除的x要是覺得别扭，可以挪到後面

5、由于bootstrap版本沖突，導緻選中的對勾無法正确顯示，我就給注釋了

用僞元素重新寫了一個√

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #ddd;
  position: relative;
   }
   /* √ */
.select2-container--default .select2-results__option[aria-selected=true]:before, 
.select2-container--default .select2-results__option[aria-selected=true]:after  {
     content: '';
     pointer-events: none;
     position: absolute;
     color: #2ac845;
     border: 1px solid;
     background-color: #2ac845;
 }
.select2-container--default .select2-results__option[aria-selected=true]:before {
    width: 3px;
    height: 1px;
    right: 11px;
    top: 50%;
    transform: skew(0deg,50deg);
}
.select2-container--default .select2-results__option[aria-selected=true]:after {
    width: 6px;
    height: 1px;
    right: 5px;
    top: 42%;
    transform: skew(0deg,-50deg);
}