利用下拉框的方法实现两个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>

 

posted on 2017-07-29 08:48  唯懿  阅读(196)  评论(0编辑  收藏  举报