引入select2插件
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
初始化元素
<script type="text/javascript">
$('select').select2();
</script>
一些常用的屬性
- //數據
data: dataall.ddlRank,
//展示
placeholder:'請選擇',
//是否有刪除叉叉
allowClear:true
//寬度
width:"200px"
事件
//不選中任何值
$(".ddlThreeClassType").select2("val", "");
//選中id
$(".ddlThreeClassType").select2("val")
//打開下拉菜單
$("#e2").select2("open")
//關閉下拉菜單
$("#e2").select2("close")
加載數據
//本地加載
$("#e11").select2({
placeholder: "請選擇",
allowClear: true,
data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});
參考表格
具體參數可以參考一下: 參數 |
類型 |
描述 |
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 |
函數 |
函數用於確定下一個搜索詞應該是什麼 |