关闭

JS左右选框(一)

840人阅读 评论(0) 收藏 举报

一、采用纯js实现

这个是左右选框公共画面,SelectBox.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script type="text/javascript" language="JavaScript">
	function allsel(n1, n2) {
		var selN1 = document.getElementById(n1);
		var selN2 = document.getElementById(n2);
		while (selN1.selectedIndex != -1) {
			var indx = selN1.selectedIndex;
			var t = selN1.options[indx].text;
			var v = selN1.options[indx].value;
			selN2.options.add(new Option(t, v));
			selN1.remove(indx);
			selN2.selected = true;
		}
	}
	function selall(n1, n2) {
		var selN1 = document.getElementById(n1);
		var selN2 = document.getElementById(n2);
		for ( var i = 0; i < selN1.options.length; i++) {
			var t = selN1.options[i].text;
			var v = selN1.options[i].value;
			selN2.options.add(new Option(t, v));
		}
		for ( var j = selN1.options.length; j >= 0; j--) {
			selN1.remove(j);
		}
	}
</script>
<table width="460" border="0" align="left" cellpadding="0"
	cellspacing="0">
	<tr>
		<td width="220">
			<table width="200" border="0" cellpadding="1" cellspacing="1">
				<tr>
					<td align="center">未選取</td>
				</tr>
				<tr>
					<td align="center" width="200" bgcolor="#FFFFFF">
						<select id="selectRights" size="8" multiple="multiple" style="width:200px ">
							
							<c:forEach items="${selectRoleList }" var="option">
								<option value="${option.value }" >${option.name }</option>
							</c:forEach>
						</select></td>
				</tr>
			</table></td>
		<td width="25" align="center"><input style="width: 50px"
			name="sure1" type="button" id="sure1"
			onclick="selall('selectRights','selectedRights')" value=">>">
			<input style="width: 50px" name="sure2" type="button" id="sure2"
			onclick="allsel('selectRights','selectedRights')" value=">">
			<input style="width: 50px" name="sure3" type="button" id="sure3"
			onclick="allsel('selectedRights','selectRights')" value="<">
			<input style="width: 50px" name="sure4" type="button" id="sure4"
			onclick="selall('selectedRights','selectRights')" value="<<">
		</td>
		<td width="200" colspan="">
			<table width="200" border="0" cellpadding="1" cellspacing="1">
				<tr>
					<td align="center">已選取</td>
				</tr>
				<tr>
					<td align="center" width="200" bgcolor="#FFFFFF">
						<select id="selectedRights" size="8" multiple="multiple" style="width:200px ">
							<c:forEach items="${selectedRoleList }" var="option">
								<option value="${option.value }" >${option.name }</option>
							</c:forEach>
						</select>
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
jsp画面中,
selectedRoleList是一个集合,是从db中查询出来的。

基本原型如下图:



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    個人簡介
    IT生態民工 拾荒者公益網站shihuangzhe.com創始人
    个人资料
    • 访问:60771次
    • 积分:765
    • 等级:
    • 排名:千里之外
    • 原创:13篇
    • 转载:4篇
    • 译文:1篇
    • 评论:5条
    文章分类
    最新评论