整理：select2的使用、事件、参数详解
于正志
官方文档（推荐）：
参考博客：
1.使用
JS组件系列——Bootstrap Select2组件使用小结
2.事件
jquery插件select2的所有事件，包括清除，删除，打开等
3.参数详解
样例（来自官方文档）
$("#e7").select2({
placeholder: "Search for a repository",
minimumInputLength: 3,
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
quietMillis: 250,
data: function (term, page) { // page is the one-based page number tracked by Select2
return {
q: term, //search term
page: page // page number
};
},
results: function (data, page) {
var more = (page * 30) < data.total_count; // whether or not there are more results available
// notice we return the value of more so Select2 knows if more results can be loaded
return { results: data.items, more: more };
}
},
formatResult: repoFormatResult, // omitted for brevity, see the source of this page
formatSelection: repoFormatSelection, // omitted for brevity, see the source of this page
dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});常用事件
// 改变事件
$("#e11").on("change", function(e) {});
// select2 打开事件
$("#e11").on("select2-open", function(e) {});
// select2 关闭事件
$("#e11").on("select2-close", function(e) {});
// 选中事件
$("#e11").on("select2-selecting", function(e) {});
// 移除完毕事件。配置allowClear: true后触发
$("#e11").on("select2-removed", function(e) {});
// 加载中事件
$("#e11").on("select2-loaded", function(e) {});
// 获得焦点事件
$("#e11").on("select2-focus", function(e) {});
// 失去焦点事件
$("#e11").on("select2-blur", function(e) {});
函数
// 获取选中的ID值
$("#e1").select2("val"));
// id="CA" 选中（好像单个还不行，以数组形式才行）
$("#e2").select2("val", "CA");
// 不选中任何值
$("#e2").select2("val", "");
// 获取选中的对象
$("#e2").select2("data");
//设置选中的值：id="CA",text="California"
$("#e2").select2("data", {id: "CA", text: "California"});
// 获取选中JSON对象
JSON.stringify($("#e2").select2("data")));
//多选设值
$("#e2").select2("data", [{id: "CA", text: "California"},{id:"MA", text: "Massachusetts"}]);参数
templateResult : formatState, // 列表带图片
templateSelection : formatState, // 选中的带图片
language: "zh-CN", //设置 提示语言
width: "100%", //设置下拉框的宽度
placeholder: "请选择", // 空值提示内容，选项值为 null
//placeholder: {id: '', text: "请选择"}, // 同上，这里默认空值为 ''
minimumInputLength: 10, //最小需要输入多少个字符才进行查询
maximumInputLength:11, //最大输入长度
allowClear: true, //是否允许手动点击删除
tags: false, // 根据搜索框创建option，默认false
selectOnClose: true, // 如果没有手动选中，下拉框消失后会自动选中被hover的选项 （不建议使用）
closeOnSelect: false, // 选择后下拉框不会关闭（单选-不建议使用）
minimumResultsForSearch: Infinity, // 隐藏搜索框
theme: "classic", // 样式
separator: ",",// 分隔符
data: initdata,// 下拉框绑定的数据
multiple: true,// 多选，默认false
maximumSelectionLength: 3, // 多选 - 设置最多可以选择多少项
tokenSeparators: [',', ' '], // 多选 - 输入逗号和空格会自动完成一个选项 前提是：tags: true
//加载远程数据参数
escapeMarkup: function (markup) { return markup; }, //template的html显示效果，否则输出代码
formatResult:repoFormatResult,// 自定义下拉选项的样式模板。返回结果回调function repoFormatResult(repo){return repo.text},这样就可以将返回结果的的text显示到下拉框里。也可以自定义返回结果样式
formatSelection:repoFormatSelectionl // 自定义选中选项的样式模板。选中项回调function repoFormatSelection(repo){return repo.text}旧版本设置初始值：
//设置初始值
initSelection:function(element, callback) {
var initData = {id:'', text:'默认值'}
callback(initData);
},样例补充
var selectCustomer;
$(function(){
initSelectCustomer();
});
function initSelectCustomer(){
$("#e2").select2({
ajax: {
url: "<%=request.getContextPath()%>/electric/customer/autocomplete",
dataType: 'json',
quietMillis: 500,
data: function (term, page) {
return {
mobilePhone: term,
};
},
results: function (data, page) {
//console.log(data);
var list = new Array();
if(data && data.length >0 ){
$.each(data, function (i,e) {
var obj = {};
obj.id = e.id;
obj.text = e.mobilePhone;
obj.username = e.name;
list.push(obj);
});
}
//console.log(list);
return { results: list};
},
cache:true
},
initSelection:function(element, callback) {
if (!selectCustomer) {
selectCustomer = {id:'${account.customer.id}', text:'${account.customer.mobilePhone}'};
//console.log("customer:id="+selectCustomer.id+",phone="+selectCustomer.text);
}
callback(selectCustomer);
},
placeholder: "输入手机号码",
language:'zh-CN',//语言
maximumInputLength:11,//最大输入长度
minimumInputLength:4,//最小输入长度
width: 'resolve',
allowClear: true, //选中之后，可手动点击删除
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) {return m;},
formatResult:repoFormatResult,// 自定义下拉选项的样式模板
formatSelection:repoFormatSelection // 自定义选中选项的样式模板
});
$("#e2").on("select2-close", function (e) {
//关闭下拉框事件。获取选中的对象
selectCustomer = $("#e2").select2("data");
//console.log("customer:id="+selectCustomer.id+",phone="+selectCustomer.text);
});
$("#e2").on("select2-removed", function (e) {
//这里是取消选中触发的事件，配置allowClear: true后触发
$("#e2").val('');
$("#mobilePhone").val('');
//console.log("移除完毕。");
});
}
function repoFormatResult(repo) {
//console.log("repo:"+repo);
var markup = '<div class="row-fluid">' +
'<div class="span10">' +
'<div class="row-fluid">' +
'<input type="hidden" value='+repo.id+'>'+
'<div class="span3">' + repo.text + '</div>' +
'</div>';
markup += '</div></div>';
return markup;
}
function repoFormatSelection(repo) {
//console.log("format:"+repo.id+",text:"+repo.text);
$("#e2").val(repo.id);
$("#mobilePhone").val(repo.text);
return repo.text;
}
类似资料：