JS左右选框(二)

原创 2012年03月22日 16:20:58

二、采用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>



版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

JS左右选框(一)

一、采用纯js实现 这个是左右选框公共画面,SelectBox.jsp function allsel(n1, n2) { var selN1 = document.getEleme...

js实现单选框的选择

整体功能:居住在海南选"是",则城市默认选择"海口";居住在海南选"否",则不选城市;如果居住在海南选择了"是",则城市选择除"海口"外的选择则弹出提示并选择海口,如果居住在海南选择了"否&...

js 实现 复选框组选

最简洁的HTML JS树形带复选框

最简洁的HTML JS树形带复选框,点大类自动选中子类. http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 无标题文档...
  • cncco
  • cncco
  • 2013-05-07 11:05
  • 6300

js下列复选框

ie4=(document.all)?true:false;  ns4=(document.layers)?true:false;  function toExit(){  var args=t...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)