适用场景：下拉框中有大量数据的情况（建议100条数据以上就要考虑使用分页获取的方式了）。
直接上代码
引入相关js和css
select2/select2.min.css
select2/select2.min.js
select2/i18n/zh-CN.js
/**
* ajax获取select2下拉框数据（带鼠标滚动分页）
* @param selectId 下拉框id
* @param options 选项，包含如下字段：
* url 数据接口url
* pageSize 每次加载的数据条数
* name 下拉框显示字段名称
* value 下拉框value字段名称
* placeholder 默认显示的文字
* selected 默认选中项，格式：[{id:1,text:"选项1"},{id:2,text:"选项2"}]
* formatResult 返回结果回调函数，可以在该回调中，自定义下拉框数据的显示样式，比如：加入图片等
* templateSelection 选中项回调，该参数必须与formatResult参数搭配使用
* 注意点1 : 后端接口需返回 data（具体数据）和 total（总页数）两个字段
* 注意点2 : 两个自定义的回调函数中，必须要把处理结果return回来，如果没有传入formatResult参数，则采用默认的显示样式
*/
function ajaxSelect2 (selectId,options,formatResult,formatSelected) {
var value = options["value"];
var name = options["name"];
var flag = (typeof formatResult === "function") ? true : false;
var select2Option = {
language: "zh-CN",
allowClear: true,
placeholder: options["placeholder"] || "请选择",
ajax:{
url: options["url"],
type: "post",
dataType: "json",
delay: 250,
data: function(params){
// 传递到后端的参数
return {
// 搜索框内输入的内容
selectInput: params.term,
// 当前页
curPage: params.page || 1,
// 每页显示多少条记录，默认10条
pageSize: options["pageSize"] || 10
};
},
cache:true,
processResults: function (res, params) {
params.page = params.page || 1;
var cbData = [];
if (flag) {
cbData = res.data;
} else {
var data = res.data;
var len = data.length;
for(var i= 0; i<len; i++){
var option = {"id": data[i][value], "text": data[i][name]};
cbData.push(option);
}
}
return {
results: cbData,
pagination: {
more: params.page < res.total
}
};
}
},
escapeMarkup: function (markup) {
// 字符转义处理
return markup;
},
// 最少输入N个字符才开始检索，如果想在点击下拉框时加载数据，请设置为 0
minimumInputLength: 0
};
if (flag) {
select2Option.templateResult = formatResult;
select2Option.templateSelection = formatSelected;
}
var $select = $("#"+selectId);
$select.select2(select2Option);
if (!flag) {
// 默认选中项设置
var html = '';
var values = [];
var selected = options['selected'];
if (selected) {
$.each(selected,function (index,item) {
values.push(item.id);
html += '<option value="'+item.id+'">'+item.text+'</option>';
});
$select.append(html);
$select.val(values).trigger('change');
}
}
}
调用方式：
var options = {
url: "", // 数据接口url
pageSize: 10, // 每次加载的数据条数
value: "id", // 下拉框value字段名称
name: "name", // 下拉框显示字段名称
selected: [] // 默认选中项，格式：[{id:1,text:"选项1"},{id:2,text:"选项2"}]
};
ajaxSelect2("下拉框id",options);
网友评论