最近工作上有个需求，页面上的查询条件为三个<select>，每个都为多选，并且三个多选为联动显示内容。刚开始找了两个mutipleSelect库，要么是方法说明不全，要么是select不能被二次赋值更新，不过最终还是找到一个可用，样式简单的多选库，链接在最下边。联动功能如下图：
比如：select1选项内容为[123,345],"123"触发select2为["A","B","C"] ,"345"触发select2为["B","C","D","E"],同时选中"123"，"345"时，则select2应为["A","B","C","D","E"]；同样select2选中时，触发select3选项更新，select3中的选项去重（我这里使用的是集合，再把集合转为数组），最后条件选完之后点击查询。查询条件关系为(s1_val1 or s1_val2)&(s2_val1 or s2_val2)&(s3_val1 or s3_val2)。废话不多说，直接上代码。
前端代码如下：
<html>
<head>
<title>myDemo</title>
<link href="css/multiple-select.min.css" rel="stylesheet" />
</head>
<body>
<table width="100%" >
<tbody>
<tr align="right" bgcolor="#efefef" >
<td width="5%" ><span id="curAreaFloor"></span> </td>
<td><span>select1</span> </td>
<td width="10%" align="left" class="c_1stSelect" >
<select id="mtSelect1" name="mtSelect1" class="chosen-select 1stSelect" data-placeholder="select1" multiple="multiple" >
</select>
</td>
<td><span>select2</span></td>
<td width="10%" align="left" class="c_2ndSelect">
<select id="mtSelect2" name="mtSelect2" class="chosen-select 2ndSelect" data-placeholder="secondClass" multiple="multiple" >
</select>
</td>
<td>
<span>select3</span>
</td>
<td width="10%" align="left" class="c_3rdSelect" >
<select id="mtSelect3" name="mtSelect3" class="chosen-select 3rdSelect" data-placeholder="thirdClass" multiple="multiple" >
</select>
</td>
<td width="5%"><button class="btn_search">query</button></td>
<td width="45%"></td>
</tr>
</tbody>
</table>
<div id="result"></div>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/multiple-select.min.js"></script>
<script src="js/myDemo.js"></script>
<script>
$(function () {
initSelectEle(devJsonObj);
});
</script>
</body>
</html>
js代码：
var devJsonObj = {
"123": {
"secLayer1": {
"A": [],
"B": [],
"C": [],
}
},
"345":{
"secLayer1": {
"C": [],
"D": [],
"F": []
},
"secLayer2": {
"E": [],
"F": []
}
}
};
function initSelectEle(devJsonObj) {
$('#mtSelect1,#mtSelect2,#mtSelect3').multipleSelect({ data: [] });
var projArr = Object.keys(devJsonObj);
var optStr = '';
var optionArr = [];
if (projArr.length > 0) {
projArr.sort();
for (var i = 0; i < projArr.length; i++) {
if (i != 0) {
optionArr.push({ text: projArr[i], value: projArr[i] });
} else {
optionArr.push({ text: projArr[i], value: projArr[i], selected: true });
}
}
$('#mtSelect1').multipleSelect('refreshOptions', {
data:optionArr,
onClick:function(view) {
initMtSelect2();
initMtSelect3();
},
onCheckAll: function () {
//console.log(JSON.stringify($('#mtSelect1').multipleSelect('getSelects')));
initMtSelect2();
initMtSelect3();
},
onUncheckAll: function () {
//console.log(JSON.stringify($('#mtSelect1').multipleSelect('getSelects')));
$('#mtSelect2').multipleSelect('refreshOptions', { data: [] });
$('#mtSelect3').multipleSelect('refreshOptions', { data: [] });
},
});
initMtSelect2();
initMtSelect3();
}
}
function initMtSelect2() {
var workstationRslt = [];
var projSelected = [];
projSelected = $('#mtSelect1').multipleSelect('getSelects');
for (var j = 0; j < projSelected.length; j++) {
var tempObj = devJsonObj[projSelected[j]];
var tempArr = Object.keys(tempObj);
workstationRslt = workstationRslt.concat(tempArr);
}
workstationRslt = Array.from(new Set(workstationRslt)); //使用集合去重
workstationRslt.sort();
var optionArr = [];
for (j = 0; j < workstationRslt.length; j++) {
if (j != 0) {
optionArr.push({ text: workstationRslt[j], value: workstationRslt[j] });
} else {
optionArr.push({ text: workstationRslt[j], value: workstationRslt[j], selected: true });
}
}
$('#mtSelect2').multipleSelect('refreshOptions', {
data: optionArr,
onClick: function (view) {
//console.log(JSON.stringify(view));
initMtSelect3();
},
onCheckAll: function () {
//console.log(JSON.stringify($('#mtSelect1').multipleSelect('getSelects')));
initMtSelect3();
},
onUncheckAll: function () {
//console.log(JSON.stringify($('#mtSelect1').multipleSelect('getSelects')));
$('#mtSelect3').multipleSelect('refreshOptions', { data: [] });
},
});
}
function initMtSelect3() {
var lineNoRslt = [];
var projSelected = [];
var wkstnSelected = [];
projSelected = $('#mtSelect1').multipleSelect('getSelects');
wkstnSelected = $('#mtSelect2').multipleSelect('getSelects');
for (var j = 0; j < projSelected.length; j++) {
for (var k = 0; k < wkstnSelected.length; k++) {
if (wkstnSelected[k] in devJsonObj[projSelected[j]]) {
var tempObj = devJsonObj[projSelected[j]][wkstnSelected[k]];
var tempArr = Object.keys(tempObj);
lineNoRslt = lineNoRslt.concat(tempArr);
}
}
//console.log('原始數組' + lineNoRslt);
}
lineNoRslt = Array.from(new Set(lineNoRslt));//使用集合去重
console.log('結果數組' + lineNoRslt);
lineNoRslt.sort();
var optionArr = [];
for (j = 0; j < lineNoRslt.length; j++) {
if (j != 0) {
optionArr.push({ text: lineNoRslt[j], value: lineNoRslt[j] });
} else {
optionArr.push({ text: lineNoRslt[j], value: lineNoRslt[j], selected: true });
}
}
$('#mtSelect3').multipleSelect('refreshOptions', {data: optionArr,});
}
$('.btn_search').click(function(){
var select1Rslt=$('#mtSelect1').multipleSelect('getSelects');
var select2Rslt=$('#mtSelect2').multipleSelect('getSelects');
var select3Rslt=$('#mtSelect3').multipleSelect('getSelects');
//console.log(select1Rslt);
$('#result').html('select1:'+select1Rslt+'<br/>'+'select2:'+select2Rslt+'<br/>'+'select3:'+select3Rslt+'<br/>');
});最后页面运行结果如下：
引入的multipleSelect地址，并且有详细使用说明：Multiple Select · Multiple Select is a jQuery plugin to select multiple elements with checkboxes :).
