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中查询出来的。

基本原型如下图:



相关文章推荐

JS左右选框(二)

二、采用Jquery实现 //add $(function(){ $("#add").click(function(){ if($("#selectRights option:se...
  • iisgirl
  • iisgirl
  • 2012年03月22日 16:20
  • 748

js 特效 5右拖动--多选框控制

  • 2010年11月29日 15:05
  • 10KB
  • 下载

js 实现 复选框组选

  • 2010年03月31日 14:29
  • 1KB
  • 下载

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

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

js 实现 复选框分组全选

  • 2010年03月31日 14:29
  • 2KB
  • 下载

js 实现 调用复选框后面的文字

  • 2010年03月31日 14:27
  • 281B
  • 下载

JS和后台获取复选框(checkbox)选中项后的文本内容

无标题页 //单选与全选的判断 function check(e, allName){ var all = document.getElementsByName(all...

js 实现 选择了哪一个单选框

  • 2010年03月31日 11:52
  • 688B
  • 下载

js 实现 获取复选框的选择项

  • 2010年03月31日 10:20
  • 927B
  • 下载

js实现单选框的选择

整体功能:居住在海南选"是",则城市默认选择"海口";居住在海南选"否",则不选城市;如果居住在海南选择了"是",则城市选择除"海口"外的选择则弹出提示并选择海口,如果居住在海南选择了"否",则城市选...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS左右选框(一)
举报原因:
原因补充:

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