JS左右选框(一)

原创 2012年03月21日 17:23:09

一、采用纯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中查询出来的。

基本原型如下图:



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

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

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

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

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

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

js实现左右选择框

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

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

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

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
  • 3631

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
  • 921

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

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

js实现左右轮播图效果

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

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