二级选择 多选框html,二级联动，第二级是多选框 multipleSelect

需要做个二级联动的功能，第二级要求是多选，用的multiple-Select方法

以老师-学生为例，数据是从后台传到前台页面的一个list中带list的JSONArray

引用(不要忘了引用图片，要不输入框右边没有三角)

jsp页面

未选择

${teacher.name}

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(''+ student['name'] +'');

});

$('#student').html(r.join('\n'));

$('#student').multipleSelect("refresh"); //这步很重要

//因为是通过jquery手动更新option选项，所以要通过refresh方法来重新加载Multiple Select

}

}

如果引用了之后页面不美观或者不协调，可以通过重新写css的方法来修改。

Multiple-Select源码主页：https://github.com/wenzhixin/multiple-select

Multiple-Select文档以及Demo：http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN