左右列表转移

最新推荐文章于 2021-06-22 13:33:47 发布

38度秋裤

最新推荐文章于 2021-06-22 13:33:47 发布

阅读量393

点赞数

本文链接：https://blog.csdn.net/u010452908/article/details/74905510

版权

<%@ page language="java" contentType="text/html; charset=gbk"
	pageEncoding="gbk"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gbk">
		<title>Insert title here</title>
		<style type="text/css">
* {
	font-family: Tahoma, Arial, serif;
	font-size: 11pt;
	line-height: 25px;
}

body {
	text-align: center;
	min-width: 760px;
}

#main {
	width: 720px;
	margin: 0 auto;
	text-align: left;
}

#main div {
	width: 30%;
	display: inline;
}

#main div input {
	position: absolute;
	left: 420px;
}

p {
	text-indent: 2em;
}

select {
	width: 120px;
}
</style>
<script type="text/javascript">
 function $(id) {
 	return document.getElementById(id);
 }
 
 function moveRight()
 {
 	// 获取左侧列表框
 	var leftSide = $("left");
 	// 获取右侧列表框
 	var rightSide = $("right");
 	// 左侧列表框的选项集合
 	var options = leftSide.options;
 	// 遍历所有的选中项
 	for (var i = 0; i < options.length; i++) {
 	// 选中项
 	  if (options[i].selected) {
 	  	// 将选项移动到右侧列表中
 	  	rightSide.appendChild(options[i]);
 	  	// 此时options 集合的元素已经不包含被移动的元素,索引值必须减去1
 	  }
 	}
 }
 
 // 需要特别说明的是,对options集合的修改是实时的,例如,将options 中的某个选项移动到另外一个列表框以后,options集合中将不在包含该选项
 // 同时options 集合的 length 属性值会减去 1
 function moveRightAll()
 {
 	// 左侧列表框
 	var leftSide = $("left");
 	// 右侧列表框
 	var rightSide = $("right");
 	// 将所有左侧选项移动到右侧
 	while (leftSide.options.length > 0)
 	{
 		rightSide.appendChild(leftSide.options[0]);
 	}
 }
</script>
	</head>
	<body>
		<div id="main">
			<div>
				<select id="left" size="10" multiple="multiple">
					<option value="a">
						选项A
					</option>
					<option value="b">
						选项B
					</option>
					<option value="c">
						选项C
					</option>
					<option value="d">
						选项D
					</option>
					<option value="e">
						选项E
					</option>
					<option value="f">
						选项F
					</option>
					<option value="g">
						选项G
					</option>
				</select>
			</div>
			<div>
				<input type="button" value="右移" style="top: 20px"
					οnclick="moveRight();">
				<input type="button" value="左移" style="top: 70px"
					οnclick="moveLeft();">
				<input type="button" value="全部右移" style="top: 120px"
					οnclick="moveRightAll();">
				<input type="button" value="全部左移" style="top: 170px"
					οnclick="moveLeftAll();">
			</div>
			<div style="left: 100px; position: relative;">
				<div>
					<select id="right" size="10" multiple="multiple">
					</select>
				</div>
			</div>
		</div>
	</body>
</html>

38度秋裤

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
左右列表转移

<%@ page language="java" contentType="text/html; charset=gbk" pageEncoding="gbk"%> Insert title here * { font-family: Tahoma, Arial, serif; font-size: 11pt; line-height: 25px;}body
复制链接

扫一扫