案例：下拉列表左右选择

最新推荐文章于 2023-11-15 22:17:26 发布

田田田田__

最新推荐文章于 2023-11-15 22:17:26 发布

阅读量324

点赞数 1

分类专栏： DOM

本文链接：https://blog.csdn.net/weixin_42061805/article/details/81514288

版权

DOM 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

注意：

option集合长度在每次添加完成时的减一

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#left1 {
	float:left;
	width:200px;
	height:300px;
}
.size{
	height:100px;	
	}
</style>
</head>

<body>
<div id="left1"	 >
	<div id="selectTop" class="size">
		<select multiple="multiple" id="select1" name="select1">
			<option>我是左边1</option>
			<option>我是左边2</option>
			<option>我是左边3</option>
			<option>我是左边4</option>
		</select>
	</div>
	<br />
	<div id="buttonBottom">
		<input type="button" value="将选中的添加至右边>>" onclick="goRight()" />
		<br />
		<input type="button" value="将全部的添加至右边>>" onclick="allGoRight()" />
	</div>
</div>
<div id="right1">
	<div class="size">
		<select multiple="multiple" id="select2">
			<option>我是右边1</option>
			<option>我是右边2</option>
			<option>我是右边3</option>
			<option>我是右边4</option>
		</select>
	</div>
	<br />
	<div>
		<input type="button" value="<<将选中的添加至左边" onclick="goLeft()" />
		<br />
		<input type="button" value="<<将全部的添加至左边" onclick="allGoLeft()" />
	</div>
</div>
<script type="text/javascript">
	function goRight(){
		var select1 = document.getElementById("select1");
		var ops = select1.getElementsByTagName("option");
		for(var i = 0; i < ops.length;i++){
			var op = ops[i];
			if (op.selected == true){
				var select2 = document.getElementById("select2");
				select2.appendChild(op);
				i--;
				}
			}
		}
		
	function allGoRight(){
		var select1 = document.getElementById("select1");
		var ops = select1.getElementsByTagName("option");
		for(var i = 0; i < ops.length;i++){
			var op = ops[i];
			var select2 = document.getElementById("select2");
			select2.appendChild(op);
			i--;
			}
		}
		
	function goLeft(){
		var select2 = document.getElementById("select2");
		var ops = select2.getElementsByTagName("option");
		for(var i = 0; i < ops.length;i++){
			var op = ops[i];
			if (op.selected == true){
				var select1 = document.getElementById("select1");
				select1.appendChild(op);
				i--;
				}
			}
		}
		
	function allGoLeft(){
		var select2 = document.getElementById("select2");
		var ops = select2.getElementsByTagName("option");
		for(var i = 0; i < ops.length;i++){
			var op = ops[i];
			var select1 = document.getElementById("select1");
			select1.appendChild(op);
			i--;
			}
		}
</script>
</body>
</html>

田田田田__

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
案例：下拉列表左右选择

注意：option集合长度在每次添加完成时的减一&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtm...
复制链接

扫一扫

专栏目录