select2 实现多级联动下拉框，分页，搜索
需要引入
select2.full.min.js zh-CN.js select2.css
var select0 = $(".select0").children("select");
var select1 = $(".select1").children("select");
var select2 = $(".select2").children("select");
var select3 = $(".select3").children("select");
var select4 = $(".select4").children("select");
//给第一个下拉框的SelectChanged事件
select0.change(function (){
//取得当前下拉框的值
var select0Value = $(".select0").children("select").val();
//当第一个下拉框内容改变的时候，第三个下拉框要隐藏起来
select1.parent().hide();
select2.parent().hide();
select3.parent().hide();
select4.parent().hide();
if(select0Value !="")
{
var options = {
url: ctx + "xxx/xxx", // 数据接口url
pageSize: 20, // 每次加载的数据条数
value: "userId", // 下拉框value字段名称
name: "userName", // 下拉框显示字段名称
selected: [], // 默认选中项，格式：[{id:1,text:"选项1"},{id:2,text:"选项2"}]
param0: select0Value
};
ajaxSelect2("myselect1",options);
}
});
select1.change(function (){
var select0Value = $(".select0").children("select").val();
var select1Value = $(".select1").children("select").val();
select2.parent().hide();
select3.parent().hide();
select4.parent().hide();
if(select1Value !="" && select1Value!=null)
{
var options = {
url: ctx + "xxx/xxx", // 数据接口url
pageSize: 20, // 每次加载的数据条数
value: "userId", // 下拉框value字段名称
name: "userName", // 下拉框显示字段名称
selected: [], // 默认选中项，格式：[{id:1,text:"选项1"},{id:2,text:"选项2"}]
param0: select0Value,
param1: select1Value
};
ajaxSelect2("myselect2",options);
}
else
{
select1.parent().hide();
select2.parent().hide();
select3.parent().hide();
select4.parent().hide();
}
});
select2.change(function (){
var select0Value = $(".select0").children("select").val();
var select1Value = $(".select1").children("select").val();
var select2Value = $(".select2").children("select").val();
select3.parent().hide();
select4.parent().hide();
if(select2Value !="" && select2Value!=null)
{
var options = {
url: ctx + "xxx/xxx", // 数据接口url
pageSize: 20, // 每次加载的数据条数
value: "userId", // 下拉框value字段名称
name: "userName", // 下拉框显示字段名称
selected: [], // 默认选中项，格式：[{id:1,text:"选项1"},{id:2,text:"选项2"}]
param0: select0Value,
param1: select1Value,
param2: select2Value
};
ajaxSelect2("myselect3",options);
}
else
{
select2.parent().hide();
select3.parent().hide();
select4.parent().hide();
}
});
select3.change(function (){
var select0Value = $(".select0").children("select").val();
var select1Value = $(".select1").children("select").val();
var select2Value = $(".select2").children("select").val();
var select3Value = $(".select3").children("select").val();
select4.parent().hide();
if(select3Value !="" && select3Value!=null)
{
var options = {
url: ctx + "xxx/xxx", // 数据接口url
pageSize: 20, // 每次加载的数据条数
value: "userId", // 下拉框value字段名称
name: "userName", // 下拉框显示字段名称
selected: [], // 默认选中项，格式：[{id:1,text:"选项1"},{id:2,text:"选项2"}]
param0: select0Value,
param1: select1Value,
param2: select2Value,
param3: select3Value
};
ajaxSelect2("myselect4",options);
}
else
{
select4.parent().hide();
}
});
/**
* 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) {
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: 50,
data: function(params){
// 传递到后端的参数
return {
// 搜索框内输入的内容
param0: options["param0"],
param1: options["param1"],
param2: options["param2"],
param3: options["param3"],
searchkey: params.term ,
// 当前页
curPage: params.page || 1,
// 每页显示多少条记录，默认20条
pageSize: options["pageSize"] || 20
};
},
cache:true,
processResults: function (res, params) {
params.page = params.page || 1;
var cbData = [];
if (flag) {
cbData = res.rows;
} else {
var data = res.rows;
var len = data.length;
for(var i= 0; i
cbData.push(option);
}
}
return {
results: cbData,
pagination: {
more: (params.page * 20) < res.total
}
};
}
},
templateSelection : function(repo) {
return repo.text;
},// 列表中选择某一项后显示到文本框的内容
escapeMarkup: function (markup) {
// 字符转义处理
return markup;
},
// 最少输入N个字符才开始检索，如果想在点击下拉框时加载数据，请设置为 0
minimumInputLength: 0
};
if (flag) {
select2Option.templateResult = function(selectName) {
if (selectName.loading) return selectName.text;
};
select2Option.templateSelection = function(selectName) {
return selectName.text;
};
}
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 += '';
});
$select.append(html);
$select.val(values).trigger('change');
$select.parent().show();
}
}
}