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

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

官網(wǎng)：http://select2.github.io/

演示：

由于博客系統(tǒng)的原因，所以只能演示簡(jiǎn)單的功能。

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

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

最新版本請(qǐng)使用<select></select>標(biāo)簽（對(duì)于本地化的數(shù)據(jù)你可以使用input，但ajax遠(yuǎn)程數(shù)據(jù)必須使用select）

二.placeholder

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

三.加載本地?cái)?shù)據(jù)

select2默認(rèn)的數(shù)據(jù)屬性是id、text，新版本可以自定義，但還是用默認(rèn)的比較好。所以提供的json中最好轉(zhuǎn)換為id、text形式，當(dāng)然可以添加其他屬性。

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:'請(qǐng)選擇',
 allowClear:true
})

四.加載遠(yuǎn)程數(shù)據(jù)

$("#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 
});

說(shuō)明：

     1.q: params.term 查詢參數(shù)（params.term表示輸入框中內(nèi)容，q發(fā)生到服務(wù)器的參數(shù)名；所以這里你可以添加自定義參數(shù)，如：stype:'person'）

     2.processResults中results: data返回?cái)?shù)據(jù)（返回最終數(shù)據(jù)給results，如果我的數(shù)據(jù)在data.res下，則返回data.res。這個(gè)與服務(wù)器返回json有關(guān)）

     3.minimumInputLength 最小需要輸入多少個(gè)字符才進(jìn)行查詢，與之相關(guān)的maximumSelectionLength表示最大輸入限制。

     4.escapeMarkup字符轉(zhuǎn)義處理

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

     6.templateSelection選中項(xiàng)回調(diào)function formatRepoSelection(repo){return repo.text}

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

五.獲取選中項(xiàng)

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

六.清空選擇項(xiàng)和設(shè)置不可用

//清空選擇
$("#c01-select").val(null).trigger("change");
$("#c01-select").val("你的placeholder").trigger("change");//或者
//如果你使用的是input標(biāo)簽（默認(rèn)就是本地?cái)?shù)據(jù)），你可以用$("#c01-select").val('');來(lái)清空選項(xiàng)
//disabled
$("#c01-select").prop("disabled", false);//可用
$("#c01-select").prop("disabled", true);//不可用

七.啟用多選

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

多選演示：

八.下面簡(jiǎn)單說(shuō)明新版與老版對(duì)比

1.結(jié)果回調(diào)和選中回調(diào)名稱：formatResult、formatSelection（老版）；templateResult、templateSelection（新版）

2.初始化：

//老版，注意如果初始化時(shí)文本框中本身沒(méi)有值（為空），則不會(huì)觸發(fā)該方法
initSelection: function (element, callback) {
 var id = $(element).val();
 var data = { id: id, text: id};//這里是初始化的數(shù)據(jù)，你可以通過(guò)id來(lái)從服務(wù)器上獲取（ajax），再裝載進(jìn)去
 callback(data);
}

//新版，直接給select添加option
$("#id").append(new Option("Jquery", 10001, false, true));
//或者
$("#id").append("<option value='10001'>Jquery</option>");

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

推薦使用

var res = $("#id").select2("data");
//返回?cái)?shù)組，單選就取res[0]；好處是不進(jìn)可以獲取id、text還可以獲取其他屬性，如res[0].names

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

5.主題樣式：新版的樣式已經(jīng)更新，但如果想使用老版樣式則可以設(shè)置 theme: "classic"

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論