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被选中的数据传递给后台了
})