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

需要做个二级联动的功能,第二级要求是多选,用的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>
如果引用了之后页面不美观或者不协调,可以通过重新写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




评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值