下拉插件select2的使用總結

一、組件地址

Select2使用示例地址：https://select2.github.io/examples.html

Select2參數文檔說明：https://select2.github.io/options.html

Select2源碼：https://github.com/select2/select2

二、引用內容：

使用select2首先需要引入其js及css文件
jquery:

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

css:

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />

js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

三、組件使用效果

1、多選

2、遠程搜索功能，輸入文本動態後臺過濾

3、設置最多隻能選幾個

四、使用示例：

基礎使用：

<div>
 	<select class="singleSelect" style="width: 200px;">
         <option value="">--請選擇--</option>
         <option value="">阿里</option>
         <option value="">阿姨</option>
         <option value="">江南</option>
         <option value="">杭州</option>
         <option value="">無錫</option>
         <option value="">上海</option>
     </select>
</div>
 <script type="text/javascript">
      $(document).ready(function() {
     	$('.singleSelect').select2();
      });
</script>

其他用法：
1、加載本地數據

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
$("#c01-select").select2({
  data: data,
  placeholder:'請選擇',
  allowClear:true
})

2、加載遠程數據

$('#territorialId').select2({
        language:"zn-CN",
        placeholder:'請選擇',
        allowClear: true,//可以清除選項
        ajax: {
            url: "/territorial/listSelect",
            data: function (params) {
                return {
                    keyWord: params.term || '',    //搜索參數
                    page: params.page || 1,        //分頁參數
                    rows: params.pagesize || 10,   //每次查詢10條記錄
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;
                var list = data.list;
                list = $.map(list, function (obj) {
                    obj.text = obj.text || obj.terrName;
                    return obj;
                });
                return {
                    results:list,
                    pagination: {
                        more: (params.page) < data.totalPage
                    }
                };
            }
        }
    });

說明：
1）.url是請求的後臺地址

2）.使用後臺動態加載數據時傳入請求參數params

3）.processResults接收後臺返回數據，該回調函數返回一個對象，包含results、pagination屬性，後臺分也是必須返回pagination，pagination中的more用來判斷是否還有下一頁

4）.results屬性爲js對象數據，數組元素中必須包含id，text屬性

list = $.map(list, function (obj) {
obj.text = obj.text || obj.terrName;
return obj;
});

3、獲取選中項

var res=$("#c01-select").select2("data")[0] ; //單選
var reslist=$("#c01-select").select2("data");    //多選
if(res==undefined)
{
     alert("你沒有選中任何項");
}
if(reslist.length)
{
     alert("你選中任何項");
}

4、清空選擇項和設置不可用

//取消選中
$("#territorialId").select2("val","all");
//清空選擇
$("#c01-select").val(null).trigger("change");
$("#c01-select").val("你的placeholder").trigger("change");//或者
//如果你使用的是input標籤（默認就是本地數據），你可以用$("#c01-select").val('');來清空選項
//disabled
$("#c01-select").prop("disabled", false);//可用
$("#c01-select").prop("disabled", true);//不可用

5、啓用多選

$("#c01-select").select2({
  data:data,
  multiple: true
});

五、select2常用的屬性

Width	字符串	控制 寬度 樣式屬性的Select2容器div
minimumInputLength	int	最小數量的字符
maximumInputLength	int	最大數量的字符
minimumResultsForSearch	Int	最小數量的結果
maximumSelectionSize	int	可選擇的最大條目數
placeholder	字符串	選擇初始值
separator	字符串	分隔符字符或字符串用來劃定id
allowClear	布爾	此選項只指定佔位符
multiple	布爾	Select2是否允許選擇多個值
openOnEnter		打開下拉如果設置爲true,當用戶按下回車鍵,Select2關閉。 默認情況下啓用這個選項。
id	函數	函數用於獲取id從選擇對象或字符串id存儲代表的關鍵
matcher	函數	用於確定是否搜索詞匹配一個選項時使用一個內置的查詢功能