select2插件的使用

前段時間用select2插件作了可選擇可編輯的功能，一直沒寫筆記，今天又用到了寫一下筆記，方便之後使用。

就以如今select2的新版本爲準把

一.文件須要引入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 }) 

四.加載遠程數據

$("#loc-parent").select2({
placeholder: "請輸入",//默認的提示信息
language: "zh-CN",
allowClear: true,//是否能夠清楚選擇項，true表示能夠，false表示不可用
ajax: {
url: "/getProducts",
dataType: 'json',
delay: 250,
type:"post",
data: function(params){
return {
term: params.term,//查詢的關鍵字(text)前臺輸入的查詢關鍵字（params.term表示輸入框的查詢關鍵字,保存到term對象，即後臺保存關鍵字的對象）
page:10//每次查詢的結果數
};
},
processResults:function (data,page){
return {
results: data.name //data返回數據（返回最終數據給results,若是個人數據在data.res下，則返回data.res。這個與服務器返回json有關）page: 10每次查詢的結果數
};
},
cache: true
//緩存
},
escapeMarkup: function (markup) { return markup;}, //字符轉義處理
minimumInputLength:0, //至少輸入n個字符，纔去加載數據
maximumInputLength:50, //限制最大字符，以防坑貨
templateResult: function (data) { //下拉列表show調用的函數
if (data.id === '') {
return '請輸入租戶名稱';
}
return data.name;
},
templateSelection: function (data) {//選擇以後
return data.name;
}

})

五.獲取選中項

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 );（新版）