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 例如：

$("#e1").select2();

$("#e1").click(function () { alert("Selected value is: "+$("#e1").select2("val"));}); // 獲取選中的ID值

$("#e1").click(function () { $("#e2").select2("val", "CA"); }); // id="CA" 選中（好像單個還不行，以數組形式才行）

$("#el").click(function() { $("#e2").select2("val", ""); }); // 不選中任何值

$("#e1").click(function () { var data = $("#e2").select2("data"); }); // 獲取選中對象

$("#e1").click(function () { $("#e2").select2("data", {id: "CA", text: "California"}); });

$("#e1").click(function () { $("#e2").select2("open"); }); // 打開下拉框

$("#e1").click(function () { $("#e2").select2("close"); }); // 關閉下拉框

$("#e1").select2({placeholder: "Select a state"}); // 下拉框 提示

$("#e1").click(function () { alert("Selected value is: "+$("#e2").select2("val"));}); // 獲取選中的ID值

$("#e1").click(function () { $("#e8_2").select2("val", ["CA","MA"]); }); // id="CA"，id="MA" 選中

$("#e12").click(function () { alert("Selected value is: "+JSON.stringify($("#e2").select2("data")));});// 獲取選中JSON對象

$("#e1").click(function () { $("#e2").select2("data", [{id: "CA", text: "California"},{id:"MA", text: "Massachusetts"}]); })

// 加載數據

$("#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=$("

$("#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請求遠程數據，以截圖為準：

API 容器

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。