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>



两个多选框(select)之间值的左右上下移动

两个多选框(select)之间值的左右上下移动     两个多选框(select)之间值的左右上下移动的代码请参考:               MultiSelects     ht...
  • ole_triangle_java
  • ole_triangle_java
  • 2016年08月17日 11:31
  • 795

实用的复选框操作——15分钟解决90%以上的javascript复选框操作

“复选框”页面: —————————————————————————————————————————————————————————————————— 实现功能: 1.点击标...
  • Allenalex
  • Allenalex
  • 2014年11月25日 18:45
  • 1584

插件介绍:bootstrap 左右移动多选框插件~Multiselect

官网: http://www.jiaoben123.com/uploadfiles/demo/d19cb85fac5b4c74bb4e387852f7d23b/#documentation引入文件:...
  • kangguowei
  • kangguowei
  • 2017年05月25日 21:56
  • 2598

js实现左右选择框

//选择 function a(){ //var option1=document.getElementsByName("option1"); var selected1=docume...
  • sjl6666666666
  • sjl6666666666
  • 2016年11月24日 12:23
  • 575

基于bootstrap的jQuery左右移动多选框插件 multiselect

用户项目管理
  • u010251897
  • u010251897
  • 2016年10月13日 14:59
  • 6466

js控制多选框左右移动

var employee = new Array(); employee[0] = ['办公室', '办公室人员1|01', '办公室人员2|02', '办公室人员3|03']; employee...
  • zhujiaxing666666
  • zhujiaxing666666
  • 2013年04月13日 10:08
  • 536

使用js实现复选框的全选、取消功能

function checkAll() { var all=document.getElementById('all'); var one=document.getElemen...
  • zzh_meng520
  • zzh_meng520
  • 2017年02月28日 16:13
  • 3593

js实现文字左右滚动

html span class="jrj-red-b ml5">最新要闻:span> div class="jrj-fr" style="width: 760px;position: relati...
  • wangqiuchen_Study
  • wangqiuchen_Study
  • 2016年04月13日 11:48
  • 916

js-案例:下拉列表左右选择分析

效果如图所示: 首先,选中前两项:点击第一个按钮,选中添加到右边,效果如图:然后点击全部添加到右边,效果如图:同样,点击选中添加到左边按钮,效果如图:点击全部添加到左边按钮,效果如图: 完整代码如图所...
  • zhulin0519
  • zhulin0519
  • 2015年11月16日 21:51
  • 1048

js实现左右轮播图效果

一般轮播图为左右、上下、3D或者渐变轮播,忙里偷闲写了一个左右轮播,该效果比较常见,但是实用性比较强。 Title *{ padding: 0; ma...
  • qq545698514
  • qq545698514
  • 2016年12月13日 10:39
  • 4313
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS左右选框(二)
举报原因:
原因补充:

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