关闭

JS左右选框(二)

标签: functionbuttonborderinputtablejquery
728人阅读 评论(0) 收藏 举报
分类:

二、采用Jquery实现

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script type="text/javascript" language="JavaScript">
	//add
	$(function(){
		$("#add").click(function(){
			if($("#selectRights option:selected").length > 0){//如果有選中
					$("#selectRights option:selected").each(function(){
					   $("#selectedRights").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");	 	     
					   $(this).remove();   	     
					})
			}
		})
	})
	
	//addAll
	$(function(){
		$("#addAll").click(function(){
			$('#selectRights option').appendTo('#selectedRights');
		})
	})
	
	//remove
	$(function(){
		$("#remove").click(function(){
			if($("#selectedRights option:selected").length > 0){//如果有選中
					$("#selectedRights option:selected").each(function(){
					   $("#selectRights").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");	 	     
					   $(this).remove();   	     
					})
			}
		})
	})
	
	//removeAll
	$(function(){
		$("#removeAll").click(function(){
			$('#selectedRights option').appendTo('#selectRights');
		})
	})
</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" type="button" id="addAll" value=">>">
			<input style="width: 50px" type="button" id="add" value=">">
			<input style="width: 50px" type="button" id="remove" value="<">
			<input style="width: 50px" type="button" id="removeAll" 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>



0
0

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