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> ）

$("#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=$("<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的數據格式[{…}, {…}, {…}, {…}, {…}];debuggerpage === 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

/*flag0 代表返回placeholder1 代表返回無數據提示2 代表返回初始提示無 代表返回api*/function getAutoCompleteApi(cusOrg, flag) {// options in getCusOrgOnlyIntroduce is hardcodedvar 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) {debuggervar 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){debuggerconsole.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 = 1debuggerreturn {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 || '輸入關鍵字后查詢');}})},

?

轉載于:https://www.cnblogs.com/susan-home/p/9214269.html

總結

以上是生活随笔為你收集整理的select2 api参数的文档的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。