Select2下拉框總結

用了這么久的Select2插件，也該寫篇文章總結總結。當初感覺Select2不是特別好用，但又找不到比它更好的下拉框插件。

在我的印象里Select2有2個版本，最新版本有一些新的特性，并且更新了一下方法參數，比最初版本要好看一些，本文針對新版本。

官網：http://select2.github.io/

演示：

由于博客系統的原因，所以只能演示簡單的功能。

一.文件需要引入select2.full.js、select2.min.css（4.0.1版本）和jquery.1.11.1

最新版本的select2如果引用的jquery版本較低的話，某些功能無法正常使用。比如：清除功能 allowClear : true

最新版本請使用<select></select>標簽

二.placeholder

placeholder占位提示文字，如果需要清楚功能，則必須設置placeholder。

三.加載本地數據

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

四.加載遠程數據

$("#c01-select").select2({
  ajax: {
    url: "data.json",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term,
      };
    },
    processResults: function (data) {
      return {
        results: data
      };
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; }, 
  minimumInputLength: 1,
  templateResult: formatRepo, 
  templateSelection: formatRepoSelection 
});

說明：

1.q: params.term 查詢參數（params.term表示輸入框中內容，q發生到服務器的參數名）

2.processResults中results: data返回數據（返回最終數據給results，如果我的數據在data.res下，則返回data.res。這個與服務器返回json有關）

3.minimumInputLength 最小需要輸入多少個字符才進行查詢，與之相關的maximumSelectionLength表示最大輸入限制。

4.escapeMarkup字符轉義處理

5.templateResult返回結果回調function formatRepo(repo){return repo.text},這樣就可以將返回結果的的text顯示到下拉框里，當然你可以return repo.text+"1";等

6.templateSelection選中項回調function formatRepoSelection(repo){return repo.text}

7.關于返回的 json的格式：select2默認json格式為[{id:1,text:'text'},{id:2,text:'text'}]，新版嚴格要求這樣的格式，當然你可以添加列，如：[{id:1,text:'text',name:'liu'}]

五.獲取選中項

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

六.清空選擇項和設置不可用

//清空選擇
$("#c01-select").val(null).trigger("change");
$("#c01-select").val("你的placeholder").trigger("change");//或者
//disabled
$("#c01-select").prop("disabled", false);//可用
$("#c01-select").prop("disabled", true);//不可用

七.啟用多選

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

多選演示：

由于博客系統原因只能演示選擇

八.再次強調本文介紹的是select2新版本使用，更多的功能可以到官網查閱。下面簡單說明新版與老版差別

結果回調和選中回調名稱：formatResult、formatSelection（老版）；templateResult、templateSelection（新版）

初始化：initSelection（老版）；dataAdapter（新版）

獲取或設置值：select2("val")（老版）； $ ( "select" ). val ( )（新版）

停用或啟用：$("select").enable(false);（老版）； $ ( "select" ). prop ( "disabled" , true );（新版）