利用下拉框的方法进行txt列表中内容的左右切换

最新推荐文章于 2023-04-13 09:03:38 发布

weixin_30820077

最新推荐文章于 2023-04-13 09:03:38 发布

阅读量239

点赞数

原文链接：http://www.cnblogs.com/sglq/p/7253468.html

版权

利用下拉框的方法实现两个txt列表内内容的左右切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<select id="left" size="10" multiple="multiple" style="width: 150px;">
			<option >123</option>
			<option >234</option>
			<option >345</option>
			<option >456</option>
			<option >567</option>
		</select>
		
		<input type="button" id="btn1" value="向右" />
		<input type="button" id="btn2" value="向左" />
		
		<select id="right" size="10" multiple="multiple" style="width: 150px;">
			<option >789</option>
			<option >890</option>
			<option >901</option>
			<option >902</option>
			<option >903</option>
		</select>
		
	</body>
</html>
<script>
	var left = document.getElementById('left');
	var right = document.getElementById('right');
	
	document.getElementById('btn1').onclick = function(){
				for(var i =0;i<left.selectedOptions.length;){
					right.appendChild(left.selectedOptions[i]);
					
				}
				
	}
	document.getElementById('btn2').onclick = function(){
				for(var i =0;i<right.selectedOptions.length;){
					left.appendChild(right.selectedOptions[i]);
					
				}
	}
</script>

转载于:https://www.cnblogs.com/sglq/p/7253468.html