40、（案例）下拉列表，左右选择

最新推荐文章于 2022-07-21 15:31:28 发布

辛勤小王子

最新推荐文章于 2022-07-21 15:31:28 发布

阅读量256

点赞数

分类专栏： # Java Web学习笔记

本文链接：https://blog.csdn.net/qq_37917691/article/details/105960240

版权

Java Web学习笔记专栏收录该内容

124 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
 <head>
	
 </head>
 <body>
 	<div id="div1" style="float:left">
		<div>
			<select id="select1" multiple="multiple" style="width:120px;height:200px;">
				<option>AAAAA</option>
				<option>BBBBB</option>
				<option>CCCCC</option>
				<option>DDDDD</option>
				<option>EEEEE</option>
			</select>
		</div>
		<div>
			<input type="button" value="选中添加到右边" onclick="selToRight();"/><br/>
			<input type="button" value="全部添加到右边" onclick="allToRight();"/>
		</div>
	</div>
	
	<div id="div2"">
		<div>
			<select id="select2" multiple="multiple" style="width:120px;height:200px;">
				<option>QQQQQ</option>
				<option>WWWWW</option>
				<option>EEEEE</option>
				<option>RRRRR</option>
				<option>TTTTT</option>
			</select>
		</div>
		<div>
			<input type="button" value="选中添加到左边" onclick="selToLeft();"/><br/>
			<input type="button" value="全部添加到左边" onclick="allToLeft();"/>
		</div>
	</div>
	
 </body>

 <script type="text/javascript">
	//1、实现选中添加到右边
	function selToRight(){
		var select2 = document.getElementById("select2");
		//获取select1下的option
		var select1 = document.getElementById("select1");
		var options1 = select1.getElementsByTagName("option");
		//遍历option数组
		for(var i=0;i<options1.length;i++){
			var option1 = options1[i];//每一个option对象
			//判断option是否被选中
			if(option1.selected){
				//添加到select2中
				select2.appendChild(option1);
				i--;//每次添加之后要让i减1
			}
		}
	}

	//2、全部添加到右边
	function allToRight(){
		var select2 = document.getElementById("select2");
		//得到select下面的option对象
		var select1 = document.getElementById("select1");
		var options1 = select1.getElementsByTagName("option");
		//遍历数组
		for(var i=0;i<options1.length;i++){
			var option1 = options1[i];//每一个option对象
			select2.appendChild(option1);
			i--;
		}
	}
	
	//3、选中添加到左边
	function selToLeft(){
		var select1 = document.getElementById("select1");
		//获取select2里面的option对象
		var select2 = document.getElementById("select2");
		var options2 = select2.getElementsByTagName("option");
		//遍历数组
		for(var i=0;i<options2.length;i++){
			var option2 = options2[i];//每一个option对象
			if(option2.selected){
				select1.appendChild(option2);
				i--;
			}
		}
	}

	//4、全部添加到左边
	function allToLeft(){
		//获取select2里面的option
		var select2 = document.getElementById("select2");
		var options2 = select2.getElementsByTagName("option");
		//遍历数组
		for(var i=0;i<options2.length;i++){
			var option2 = options2[i];//每一个option对象
			select1.appendChild(option2);
			i--;
		}
	}

</script>
</html>

在这里插入图片描述

辛勤小王子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
40、（案例）下拉列表，左右选择

<!DOCTYPE html><html lang="en"> <head> </head> <body> <div id="div1" style="float:left"> <div> <select id="select1" multiple="multiple" style=...
复制链接

扫一扫

专栏目录