select2级联+ajax动态数据源
原创 2019-09-05 21:23 阅读(2011)次
上一篇，我分享了select2 ajax动态加载数据:http://classinstance.cn/detail/59.html
这次，我分享select2要实现级联，如下图：
直接上代码
html:
<div class="form-group"> 公司： <select class="js-example-data-ajax" style="width: 200px" id="companyId"> </select> 门店： <select class="js-example-data-ajax" style="width: 200px" id="deptId"> </select> <button id="searchBt" class="layui-btn layui-btn-sm"><i class="layui-icon"></i>搜索</button> </div>
js:
//加载公司
$('#companyId').select2({
ajax: {
url: function (params) {
return personnel_service_ip+'/companys';
},
data: function (params) {
return {
params:{
companyName: params.term // search term 请求参数 ， 请求框中输入的参数
},
offset: 0,
limit:100
};
},
processResults: function (data) {
var itemList = [{id:"-1",text:"-请选择-"}];
var arr = data.data;
for(item in arr){
itemList.push({id: arr[item].id, text: arr[item].companyName})
}
return {
results: itemList
};
}
},
placeholder:'----请选择-----',//默认文字提示
language: "zh-CN"
});
$('#companyId').change(function(){
$("#deptId").val(null).trigger("change");
});
//加载门店
$('#deptId').select2({
ajax: {
url: function (params) {
return personnel_service_ip+'/departments';
},
data: function (params) {
return {
params:{
deptName: params.term, // search term 请求参数 ， 请求框中输入的参数
deptType: 7,
companyId: $('#companyId').val() == "-1" ? "" : $('#companyId').val()
},
offset: 0,
limit:100
};
},
processResults: function (data) {
//$('#deptId').val('-1');
var itemList = [{id:"-1",text:"-请选择-"}];
var arr = data.data;
for(item in arr){
itemList.push({id: arr[item].id, text: arr[item].deptName})
}
return {
results: itemList
};
}
},
placeholder:'----请选择-----',//默认文字提示
language: "zh-CN"
});