二级联动，第二级是多选框 multipleSelect上海迅速网络

13916016158

关注迅速公众平台

关注微信联系人

企业电话：021-64391578

二级联动，第二级是多选框 multipleSelect

本文链接：https://blog.csdn.net/ting_125/article/details/79282029
需要做个二级联动的功能，第二级要求是多选，用的multiple-Select方法

以老师-学生为例，数据是从后台传到前台页面的一个list中带list的JSONArray
引用（不要忘了引用图片，要不输入框右边没有三角）

<script src="js/multiple-select.js"></script>
<link rel="stylesheet" href="css/multiple-select.css" />
jsp页面

<div>
<select name="teacher" οnchange="teacherChange()" >
<option value="" selected="selected">未选择</option>
<c:if test="${teachers != null}">
<c:forEach items="${teachers}" var="teacher">
<option value="${teacher.id}">${teacher.name}</option>
</c:forEach>
</c:if>
</select>
</div>
<div>
<select id="student" multiple="multiple"></select>
</div>
js页面
<script type="text/javascript">
var teachers = ${teachers};
$(function(){
$('#student').multipleSelect({
width : 120,
allSelected: '全部', //option全部选了之后框里显示的内容
multiple : false, //是否在一行中显示多个选项
selectAll: false, //是否显示全选复选框
placeholder : '未选择', //默认值
});
});

//改变teacher 切换student
function teacherChange() {
var teacherId = $("[name='teacher']").val();
var students = [];

if (teacherId == null || teacherId == "") {
$('#student').html("");
$('#student').multipleSelect("refresh"); //这步很重要
} else {
$(teachers).each(function(index, teacher) {
if (teacher['id'] == teacherId) {
students = teacher['student'];
return false;
}
});

var r = [];
$(students).each(function(index, student) {
r.push('<option value="'+ student['id'] +'">'+ student['name'] +'</option>');
});
$('#student').html(r.join('\n'));
$('#student').multipleSelect("refresh"); //这步很重要
//因为是通过jquery手动更新option选项，所以要通过refresh方法来重新加载Multiple Select
}
}
</script>