| 具體參數能夠參考一下：javascript 參數css |
類型html |
描述java |
| Widthgit |
字符串github |
控制 寬度 樣式屬性的Select2容器divajax |
| minimumInputLengthjson |
int後端 |
最小數量的字符api |
| 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 |
函數 |
函數用於肯定下一個搜索詞應該是什麼 |
- $("#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) {
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請求遠程數據，以截圖爲準：
miniNameInModal.select2({ ajax: { url:Api.getMiniClassListForJqGrid, //當用戶打開控件時，Select2會向指定的URL發出請求（除非有 minimumInputLength設置），而且每當用戶在搜索框中輸入時也是如此。默認狀況下，它將以查詢字符串參數的形式發送如下內容： data: function (term,page) {// term ：搜索框中的當前搜索詞。 var query = { name: term, row:20, page:page, search: term, type: 'public' } //Query parameters will be ?search=[term]&type=public&name=[term] return query; }, results:function(data,page){ //data是後端返回的原始數據，data.rows的數據格式[{…}, {…}, {…}, {…}, {…}]; debugger page === 1 && (dataObjs = []); var result=[]; $(data.rows).each(function(i,item){ var row=[], dataObj={}; row['id']=item.miniClassId; row['text']=item.name; dataObj = $.extend({},item,{ totalLastClassHours:item.totalClassHours-item.consume }); dataObjs.push(dataObj);//item對象增長一個屬性。 result.push(row); }); if((data.rows).length>0){ return {results :result,more:true};//返回一個數組，result數組的格式是[[],[],[]] }else{ return {results :result}; } } } });
miniNameInModal.select2({ placeholder :'請選擇班課', ajax :{ url :function(term,page){ return Api.getMiniClassListForJqGrid+'?name='+(term||'')+'&rows=20&page='+page; }, results:function(data,page){ page === 1 && (dataObjs = []); var result=[]; $(data.rows).each(function(i,item){ var row=[], dataObj={}; row['id']=item.miniClassId; row['text']=item.name; dataObj = $.extend({},item,{ totalLastClassHours:item.totalClassHours-item.consume }); dataObjs.push(dataObj); result.push(row); }); if((data.rows).length>0){ return {results :result,more:true}; }else{ return {results :result}; } } } })
// 初始化選項 function initSelectOptions(){ //選學員 // findStudentAutoComplate.select2({ // placeholder: '請選擇學員', // ajax: { // url: function (term, page) { // return Util.getURLData(Api.getStudentListShortly + '?name=' + (term || '') + '&rows=20&page=' + page); // }, // results: function (response) { // var result = []; // var data = response.data.datas; // $(data).each(function (i, item) { // var row = []; // row['id'] = item.id; // row['text'] = item.name; // result.push(row); // }); // if (data.length > 0) { // return { results: result, more: true }; // } else { // return { results: result }; // } // } // } // }); }
$('#reviewUser').select2({
width: '100%', formatSelection: function (data, container, escapeMarkup) {
$('#checkout-form').valid();
return data ? escapeMarkup(data.text) : undefined;
}
});
$('#approveUser').select2({
formatSelection: function (data, container, escapeMarkup) {
$('#checkout-form').valid();
return data ? escapeMarkup(data.text) : undefined;
}
});
currentStudentName.select2({ placeholder :'請選擇學員', ajax :{ url:function(term,page){ return Api.getOneOnOneStudentList+'?blCampusId=' + currentCampusId + '&name='+(term||'')+'&_search=true&sord=asc&rows=20&page='+page; }, dataType: 'json', multiple: true, results:function(data,page){ page === 1 && (dataObjs = []); var result=[]; $(data.rows).each(function (i, item) { var dataObj={},row=[]; row['id']=item.id; row['text']=item.name; dataObj = $.extend({},item); dataObjs.push(dataObj); result.push(row); }); if((data.rows).length>0){ return {results :result,more:true}; }else{ return {results :result}; } } } })
//設置select2 placeholder currentAddressSelect.select2({ formatNoMatches: function () { return '暫無數據' + '<a class="link pull-right">添加小區</a>'; } });
// 加載學員下拉框 $('form[id=frm] select[name=studentId]').select2({ formatNoMatches: '找不到匹配的數據' });
schoolEl.select2({ formatNoMatches: function () { if(Index.authFuncBtnTags.indexOf('BTN_CREATE_SCHOOL')!=-1){//加了權限才顯示 return '暫無數據' + '<a class="addSchool link pull-right">添加學校</a>'; }else{ return '暫無數據'; } } });
placeholder: "請輸入", minimumInputLength: 1, separator: ",", // 分隔符 maximumSelectionSize: 5, // 限制數量 initSelection: function(element, callback) { // 初始化時設置默認值 }, createSearchChoice: function(term, data) { // 建立搜索結果（使用戶能夠輸入匹配值之外的其它值） return { id: term.mid, text: term.name }; }, formatSelection: function(item) { return item.name;//注意此處的name，要和ajax返回數組的鍵值同樣 }, // 選擇結果中的顯示 formatResult: function(item) { return item.name;//注意此處的name }, // 搜索列表中的顯示 ajax: { url: "{:U('Admin/Member/getzj')}", // 異步請求地址 dataType: "json", // 數據類型 data: function(term, page) { // 請求參數（GET） return { q: term }; }, results: function(data, page) { return data; }, // 構造返回結果 escapeMarkup: function(m) { return m; } // 字符轉義處理 }
//轉介紹類型的時候，自動帶出轉介紹人的select2
/*flag 0 表明返回placeholder 1 表明返回無數據提示 2 表明返回初始提示 無 表明返回api */ function getAutoCompleteApi(cusOrg, flag) { // options in getCusOrgOnlyIntroduce is hardcoded var apiList = [EduBoss.serviceApi.getAutoCompeleteCustomerForAll, EduBoss.serviceApi.getUserAutoCompleteForAll, EduBoss.serviceApi.getAutoCompleteStudentForCustomerNewIntroduce]; var tipList = ['請選擇客戶', '請選擇員工', '請選擇學員']; var cusList = ['客戶轉介紹', '員工轉介紹', '學員轉介紹']; var noDataTips = ['沒有找到相關客戶', '沒有找到相關員工', '沒有找到相關學員']; var initTips = ['輸入客戶姓名/手機號', '輸入員工姓名', '輸入學員姓名']; var index = $.inArray(cusOrg, cusList); if (index === -1) return ''; if (flag === 0) { return tipList[index]; } else if (flag === 1) { return noDataTips[index]; } else if (flag === 2) { return initTips[index]; } else { return apiList[index]; } } function safeDestroyAutocomplete(sel) { var $el = $(sel); if ($el.hasClass("select2-offscreen")) { $el.select2('destroy'); } }
$("#customerNewIntroduceType").on("change", function (event) {
debugger
var introducerSel = $('#introducer');
safeDestroyAutocomplete(introducerSel);
cusNewIntroTypeName = $(this).val();
var text = $(this).find(":selected").text(),
url = getAutoCompleteApi(text);
if (url) {
safeDestroyAutocomplete(introducerSel);
Util.normalSelect2(introducerSel, {
placeholder: getAutoCompleteApi(text, 0),
api: url,
labelFormat: function (data) {//data = "Wed Jan 17 11:44:54 CST 2018（）,1"
debugger
// console.log(data+"yys")
return data ? data.substring(0, data.indexOf(',')) : '';
},
results:function(data){
debugger
console.log(data+"uud")},
noDataTips: getAutoCompleteApi(text, 1),
initTips: getAutoCompleteApi(text, 2),
})
} else {
safeDestroyAutocomplete(introducerSel);
}
})
modal.on('show.bs.modal', function () {//要等modal出來以後，才能再找到對應的元素，觸發綁定的change事件。 若是是loadHtmlModalWithParameters的形式加載modal，那麼load的Modal裏邊須要加上
//Util.modalExec(modal.parents('.modal'), initData);以上這一句要寫在initEven的後面。等modal徹底加載出來以後再iniData（），initData以後就不須要另外的initData了。
var introducerSel = $('#introducer'); safeDestroyAutocomplete(introducerSel); $("#customerNewIntroduceType").change(); });
<div class="col-md-6 form-group">
<label class="must-input">轉介紹類型</label>
<div><select name="customerNewIntroduceType" class="required form-control select2" data-from="customerNewIntroduceType" id="customerNewIntroduceType">//加了select2回顯的時候爲何要change一下呢？
//若是是普通的select則不須要change，使用Util.fillElmentValueByTag(data, 'data-from', null, modal);就能夠回顯出來了。
</select></div> </div>
//修改 jqgrid.on('click', '.mod', function () { var id = $(this).parents('tr').attr('data-id'); modal.find("#myModalLabel").text("修改轉介紹"); $.get(Api.getCustomerNewIntroduct, { customerNewIntroductId:id }, function (res) { if (res.resultCode === 0) { var data = res.data; Util.fillElmentValueByTag(data, 'data-from', null, modal);// followUpUserId.prop('disabled', true); recordDate.prop('disabled', true); $("#customerName").prop('disabled', true); contract.prop('disabled', true); modal.modal('show'); modal.find("#moreCustomerInfo").hide(); $("#customerNewIntroduceType").change(); $("#introducer").prev("div").find(".select2-chosen").text(data.introducer); oldCustomerNewIntroduceType = data.customerNewIntroduceType; oldIntroducer = data.introducer; } }) })
normalSelect2: function (item, options) { options = options || {}; item.select2({ placeholder: options.placeholder || '請選擇', ajax: { url: function (term, page) { if (!term) return []; var api = options.api; if ($.type(api) === 'function') api = api(); return Util.getURLData(api + (/\?/g.test(api) ? '&' : '?') + 'term=' + (term || '')); }, results: function (data, page) { //data = (7) [{label: "sdfxf（）,86305", value: "86305"}, {…}, {…}, {…}, {…}, {…}, {…}], page = 1 debugger return { results: data.map(function (item) { return { id: item.value, text: options.labelFormat ? options.labelFormat(item.label) : item.label } }) }; } }, formatNoMatches: function (term) { return term ? (options.noDataTips || '暫無數據') : (options.initTips || '輸入關鍵字後查詢'); } }) },