select2 api參數的文檔

具體參數可以參考一下： 參數	類型	描述
Width	字符串	控制 寬度 樣式屬性的Select2容器div
minimumInputLength	int	最小數量的字符
maximumInputLength	int	最大數量的字符
minimumResultsForSearch	Int	最小數量的結果
maximumSelectionSize	int	可選擇的最大條目數
placeholder	字符串	選擇初始值
separator	字符串	分隔符字符或字符串用來劃定id
allowClear	布爾	此選項只指定佔位符
multiple	布爾	Select2是否允許選擇多個值
openOnEnter		打開下拉如果設置爲true,當用戶按下回車鍵,Select2關閉。 默認情況下啓用這個選項。
id	函數	函數用於獲取id從選擇對象或字符串id存儲代表的關鍵
matcher	函數	用於確定是否搜索詞匹配一個選項時使用一個內置的查詢功能
sortResults	函數	用於排序列表搜索之前顯示的結果。
formatSelection	函數	函數用於呈現當前的選擇
formatResult	函數	函數用來渲染結果,
formatResultCssClass	函數	函數用於添加css類結果元素
formatNoMatches	字符串/函數	字符串包含“不匹配”消息,或  函數用於呈現信息
formatSearching	字符串/函數	字符串包含“搜索… “消息,或  函數用於呈現顯示的消息 正在進行搜索。
formatAjaxError	字符串/函數	字符串包含消息“加載失敗”,或  函數用於呈現信息
formatInputTooShort	字符串/函數	包含“搜索”輸入太短消息的字符串,或  函數用於呈現信息。
formatInputTooLong	字符串/函數	包含“搜索”輸入太短消息的字符串,或  函數用於呈現信息
formatInputTooLong	字符串/函數	包含“搜索輸入字符串太長”消息,或  函數用於呈現信息。
formatSelectionTooBig	字符串/函數	字符串包含“你不能選擇任何更多的選擇”消息,或  函數用於呈現信息
formatLoadMore	字符串/函數	字符串/函數
createSearchChoice	函數	創建一個新的可選選擇從用戶的搜索詞。 允許創建通過查詢選擇不可用 功能。 有用的用戶可以創建動態的選擇時,如“標籤”usecase。
createSearchChoicePosition	函數/字符串	定義的位置插入元素
initSelection	函數	調用Select2創建允許用戶初始化選擇的值 select2附加到元素
tokenizer	函數	記號賦予器函數可以處理後輸入搜索框的輸入每一個按鍵和提取 並選擇選擇。
tokenSeparators	函數	一個字符串數組定義標記爲默認的分隔符 分詞器 功能。 默認情況下,此選項設置爲一個空數組標記這意味着使用默認 編譯器是禁用的。 通常是明智的,設置該選項值相似 [',',' '] 。
query	函數	函數用於搜索詞的查詢結果。
ajax	對象	選擇內置的ajax查詢功能。 這個對象作爲快捷方式有手動編寫一個函數,執行ajax請求。 內置函數支持更高級的特性,比如節流和無序的反應。
data	數組/對象	擇建在查詢功能,使用數組。
tags	數組/函數	將Select2放入“標籤'mode,用戶可以添加新的選擇和預先存在的標籤是通過提供 這個選項的屬性是一個 數組 或者一個 函數 返回一個 數組的 對象 或 字符串 。 如果 字符串 而不是使用 對象 他們將有一個被轉換成一個對象 id 和 文本 屬性相等 的值 字符串 。
containerCss	函數/對象	內聯css將被添加到select2的容器。 一個對象包含css屬性/值密鑰對或一個函數,這個函數返回一個對象。
containerCssClass	函數/字符串	Css類將被添加到select2容器的標籤。
dropdownCss	函數/對象	內聯css將被添加到select2下拉的容器。 一個對象包含css屬性/值密鑰對或一個函數,這個函數返回一個對象。
dropdownCssClass	函數/字符串	Css類將被添加到select2下拉的容器。
dropdownAutoWidth	布爾	當設置爲 真正的 嘗試自動尺寸下拉基於內容的寬度。
adaptContainerCssClass	函數	過濾器/重命名的css類,因爲他們被複制從源標籤select2容器標籤
adaptDropdownCssClass	函數	濾器/重命名的css類,因爲他們被複制從源標籤select2拉標籤
escapeMarkup	函數	函數用於後處理標記從格式化程序返回功能。 默認情況下這個功能轉義的html實體,以防止javascript注入。
selectOnBlur	布爾	設置爲 真正的 如果你想要Select2選擇當前高亮選項時模糊。
loadMorePadding	整數	定義了多少像素需要加載下一頁前折以下。 默認值是 0 這意味着結果列表需要滾動到下一個頁面的底部加載的結果。 這個選項可以用來觸發加載更快,可能導致更流暢的用戶體驗。
nextSearchTerm	函數	函數用於確定下一個搜索詞應該是什麼

  

---

Example Code（針對目標元素爲 div 例如：<div id="e1">...</div> ）

1. $("#e1").select2(); 
2. $("#e1").click(function () { alert("Selected value is: "+$("#e1").select2("val"));}); // 獲取選中的ID值
3. $("#e1").click(function () { $("#e2").select2("val", "CA"); }); // id="CA" 選中（好像單個還不行，以數組形式才行）
4. $("#el").click(function() { $("#e2").select2("val", ""); });  // 不選中任何值
5. $("#e1").click(function () { var data = $("#e2").select2("data"); }); // 獲取選中對象
6. $("#e1").click(function () { $("#e2").select2("data", {id: "CA", text: "California"}); });
7. $("#e1").click(function () { $("#e2").select2("open"); }); // 打開下拉框
8. $("#e1").click(function () { $("#e2").select2("close"); }); // 關閉下拉框
9. $("#e1").select2({placeholder: "Select a state"});  // 下拉框 提示
10. $("#e1").click(function () { alert("Selected value is: "+$("#e2").select2("val"));}); // 獲取選中的ID值
11. $("#e1").click(function () { $("#e8_2").select2("val", ["CA","MA"]); });   // id="CA"，id="MA" 選中
12. $("#e12").click(function () { alert("Selected value is: "+JSON.stringify($("#e2").select2("data")));});// 獲取選中JSON對象
13. $("#e1").click(function () { $("#e2").select2("data", [{id: "CA", text: "California"},{id:"MA", text: "Massachusetts"}]); });

14. ---

// 加載數據

$("#e11").select2({

placeholder: "Select report type",

allowClear: true,

data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]

});

// 加載數組  支持多選

$("#e11_2").select2({

createSearchChoice:function(term, data) { if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) {return {id:term, text:term};} },

multiple: true,

data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]

});
function log(e) {

var e=$("<li>"+e+"</li>");

$("#events_11").append(e);

e.animate({opacity:1}, 10000, 'linear', function() { e.animate({opacity:0}, 2000, 'linear', function() {e.remove(); }); });

}

// 對元素 進行事件註冊

$("#e11")
.on("change", function(e) { log("change "+JSON.stringify({val:e.val, added:e.added, removed:e.removed})); })  // 改變事件
.on("select2-opening", function() { log("opening"); })  // select2 打開中事件
.on("select2-open", function() { log("open"); })     // select2 打開事件
.on("select2-close", function() { log("close"); })  // select2 關閉事件
.on("select2-highlight", function(e) { log ("highlighted val="+ e.val+" choice="+ JSON.stringify(e.choice));})  // 高亮
.on("select2-selecting", function(e) { log ("selecting val="+ e.val+" choice="+ JSON.stringify(e.choice));})  // 選中事件
.on("select2-removing", function(e) { log ("removing val="+ e.val+" choice="+ JSON.stringify(e.choice));})  // 移除中事件
.on("select2-removed", function(e) { log ("removed val="+ e.val+" choice="+ JSON.stringify(e.choice));})  // 移除完畢事件
.on("select2-loaded", function(e) { log ("loaded (data property omitted for brevity)");})  // 加載中事件
.on("select2-focus", function(e) { log ("focus");})    //  獲得焦點事件
.on("select2-blur", function(e) { log ("blur");});     //  失去焦點事件

$("#e11").click(function() { $("#e11").val(["AK","CO"]).trigger("change"); });

官網文檔地址是：http://select2.github.io/select2/#documentation。說再多也沒用，最後我們來個實例來證明一下ajax請求遠程數據，以截圖爲準：