js代码结合xm-select实现下拉框多选功能

js代码结合xm-select实现下拉框多选功能

准备工作：
下载xm-select.js
把xm-select.js引入项目中

1、先在html页面新增一个div标签，设置好id属性：

<div id="source" style="width:135px; margin:3px;"></div>

2、在js页面写js代码：

var sourceSys = [];//定义一个数组，用于接收需要在下拉框显示的可选项
var selectedDatas = "";//用于存储被选择的数据
$.ajax({
	url: "aa/bb/cc",//通过这个url从后台查询出你要显示在下拉框的数据，返回List<BO>类型的数据
	headers: {"Access-Token": sessionStorage.getItem("token")},//根据项目需求是否需要传递token，headers可有可无
	type: "post",
	success: function(obj){
		$.each(obj.data, function(index, item){
			sourceSys[index] = new Object();
			sourceSys[index].name = item.aaa;//后端返回的数据中aaa字段赋值给name属性
			sourceSys[index].value = item.bbb;
		});
		xmSelect.render({
			el: '#source',//html页面div的id
			language: 'zn',//中文
			tips: '请选择来源系统',//默认显示这句话在下拉框中
			size: 'large',
			direction: 'down',
			toolbar: {show:true},
			filterable: true,
			paging: true,//下拉框是否支持分页
			pageSize: 10,//每页最多显示10条数据
			height: '400px',
			data: sourceSys,//sourceSys上面定义的，是一个数组，并且数组中每条数据都是name=xxx,value=xxx的格式
			on: function(data2){//选中数据时启动此方法
				selectedDatas = data2.arr//把选中的数据赋值给selectedDatas
			}
		});
	}
});
//点击查询按钮
$("#searchBtn").click(function(){
	var selectVals = "";
	for(var i; i<selectedDatas.length; i++){
		selectVals += selectedDatas[i].value + ",";//将被选择的数据拼接字符串
	}
	selectVals = selectVals.substring(0,selectVals.length-1);//去掉最后一个逗号
	......
	//在这里就可以把selectVals被选中的数据传递给后台了
})