前端外掛程式之Select2使用

工欲善其事，必先利其器

select2是一款基於jquery的下拉列表外掛程式，主要用來優化select，支援單選和多選，同時也支援分組顯示、列表檢索、遠端獲取資料等眾多好用的功能

需要用到的js和css檔案位於專案**下的dist目錄中，需要將這個目錄中的對應檔案放入你的專案裡，這一步不贅述

引入css/js檔案，由於select2是基於jquery的，所以要先引入jquery，這裡我們都直接引入cdn的位址

初始化select2

-----單選----- ops-coffee-a ops-coffee-b ops-coffee-c ops-coffee-d ops-coffee-e ops-coffee-f ops-coffee-g

完成以上兩步可以看到頁面效果如下

$('#id_select2_demo1').select2();

placeholder：選擇框的提示語，需要注意，要想讓這個提示語生效，需要select的option裡邊有乙個value為空的option，例如上邊例子中的

-----單選-----

與預設的select除了樣式上的區別外，最重要的是多了個搜尋框，能用來搜尋option項，如果你不想顯示這個搜尋框，可以通過設定項minimumresultsforsearch隱藏

var selectorx = $('#id_select2_demo1').select2();

除了例項化已經存在的select之外，也可以通過設定項data載入本地資料

var sdata = [,,
]$('#id_select2_demo2').select2();

select2能夠載入的資料格式如上，需要兩個資料屬性id和text，當然你也可以載入其他的額外屬性以在需要時獲取

除了載入本地資料外，也支援ajax非同步去後端獲取資料，用法如下：

$('#id_select2_demo3').select2(;
},processresults: function (data) ;
},cache: true
},minimuminputlength: 2
});

delay: 250：配置告訴select2在使用者停止輸入多少毫秒後開始查詢，合理設定可以避免頻繁向後端傳送請求

search: params.term：定義了要傳遞給後端的查詢引數，search為傳送到服務端的引數名，params.term表示輸入框中輸入的內容，當然這裡也可以新增一些自定義的引數，例如：

data: function (params) ;
},

那麼當你輸入ops時，服務端接受到的完整引數就是/sdata.json?search=ops&site=results: data：定義了後台返回的資料，其中data為select2能夠識別的格式，如果後端返回的格式不是select2能夠識別的格式，例如下邊這樣

,,,
]}

那麼你需要先將其處理成select2能夠識別的格式，這裡我們就需要取出date中的message

processresults: function (data) ;
},

minimuminputlength：ajax非同步請求通常我們會配合配置項minimuminputlength使用，這個配置項的意思是輸入指定長度的字元後開始搜尋，也就是點選select選擇框預設不會去後台請求資料，當你輸入指定長度的字元時才會去搜尋，這樣在你搜尋項非常多的時候能更精確的匹配你想要的內容

如果你想點選即顯示所有option，那麼你可以將他的值設定為0，或者不配置這個配置

同時也可以通過maximuminputlength配置項配置輸入字元的最大長度

select2對多選的支援也非常簡單，跟預設的select標籤一樣只需要在select標籤中新增multiple="multiple"即可

ops-coffee-a
ops-coffee-c
ops-coffee-d
ops-coffee-e
var selectory = $('#id_select2_demo4').select2();

顯示效果如下：

allowclear：是否顯示清楚按鈕，預設false，如果設定為true，需要同時配置placeholder，否則可能會引起js報錯：

typeerror: cannot read property 'id' of undefined

maximumselectionlength：配置最多能選擇多少項

另外還有幾個配置上邊沒有講到的：

width：寬度，例如100%

multiple：是否支援多選，預設false

closeonselect：是否選中後關閉選擇框，預設true

tags：是否可以動態建立選項

disabled：是否禁用

debug：是否開啟debug模式

獲取已選擇的值，無論是單選還是多選都可以用下邊的**來獲取選擇的option

$('#id_select2_demo4').select2('val')

獲取已選擇的物件

$("#id_select2_demo4").select2("data")

如果想要拿到已選擇option的text值，可以通過如下方法，以下**中的[0]用來獲取第乙個物件，對單選合適，如果是多選的話需要迴圈獲取

$("#id_select2_demo4").select2("data")[0].text

selected，初始化值，設定選中項

# 單選情況下val為數字，這裡的selectx為
$("#id_select2_demo1").val(2).trigger("change");
# 多選情況下val為列表
$("#id_select2_demo4").val([2,3,5]).trigger("change");

清空已選擇的值，無論是單選還是多選都可以這樣清除

$("#id_select2_demo1").val(null).trigger('change');
$("#id_select2_demo4").val(null).trigger('change');

禁用select2

$("#id_select2_demo1").prop('disabled',true);;
$("#id_select2_demo4").prop('disabled',true);;

動態新增select的option

$('#add').click(function() )

change.select2：新增select資料後觸發select2更新

.select2("open")：開啟select，open改為close可動態關閉select，改為destroy可銷毀select2，恢復select預設樣式

前端外掛程式之Select2使用

select2 外掛程式使用注意事項

select2 外掛程式載入後端資料

select2 使用筆記

前端外掛程式之Select2使用

select2 外掛程式使用注意事項

select2 外掛程式載入後端資料

select2 使用筆記

相關推薦