码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-07-29 10:21:46      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:pen   rip   列表   cti   get   sel   方法   ons   set   

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

 

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

标签:pen   rip   列表   cti   get   sel   方法   ons   set   

原文地址:http://www.cnblogs.com/sglq/p/7253468.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!