select2级联+ajax动态数据源

原创 2019-09-05 21:23 阅读(1307)次

上一篇,我分享了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"
});