| 具体参数能够参考一下：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 || '输入关键字后查询'); } }) },