码迷,mamicode.com
首页 > 移动开发 > 详细

多选移动列表操作

时间:2014-09-27 14:49:19      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   io   ar   java   for   

<html>
	<head>
		<title>多选移动列表操作</title>
		<meta http-equiv='Content-Type' content='text/css;charset=utf-8'/>
		<script>
		</script>
		<style>
			.yemian{
				margin-left:30%;
				width:500px;
				height:400px;
				background-color:cyan;
			}
			.s{
				width:150px;
				height:250px;
			}
			.input{
				width:50px;
				height:30px;
			
			}
		</style>
		<script>
			function move(srcId,desId){
				var src=document.getElementById(srcId);
				var des=document.getElementById(desId);
				var flag=true;
				for(var i=src.length-1;i>=0;i--){
					if(src.options[i].selected){
						var op=new Option(src.options[i].value,src.options[i].text);
						//方法一:
							des.options[des.options.length]=op;
							src.options[i]=null;
						//方法二:以下这条语句除了赋值之外,还删除了src.options数组中的src.options[i]
						//所以不须要运行src.options[i]=null;
							//des.options[des.options.length]=src.options[i];
						flag=false;
					}
				}
				if(flag){
					alert("你必须选择至少一项!");
				}
			}
			function moveAll(srcId,desId){
				var src=document.getElementById(srcId);
				var des=document.getElementById(desId);
				for(var i=src.length-1;i>=0;i--){
					des.options[des.options.length]=src.options[i];
					src.options[i]=null;
				}
			}
		</script>
	</head>
	<body>
		<div class='yemian' >
			<h1 align='center'>多选移动操作</h1>
			<table align='center' cellspacing='20' cellpadding='10px';>
				<tbody>
					<tr>
						<td>
							<select class='s' multiple='multiple' id='left' ondblclick="move('left','right')">
								<option>java</option>
								<option>c++</option>
								<option>数据结构</option>
							</select>
						</td>
					
						<td>
							<input type="button" value='-->' class='input' onclick="move('left','right')"/><br/>
							<input type="button" value='-->>' class='input' onclick="moveAll('left','right')"/><br/>
							<input type="button" value='<--' class='input' onclick="move('right','left')"/><br/>
							<input type="button" value='<<--' class='input' onclick="moveAll('right','left')"/><br/>
						
						</td>
						<td>
							<select class='s' id='right'  multiple='multiple' ondblclick="move('right','left')" >
							</select>
						</td>
					</tr>
				</tbody>
			</table>
			<div align='center'><input type='submit' value='提交'/></div>
		</div>
	</body>


</html>


bubuko.com,布布扣

多选移动列表操作

标签:des   style   blog   http   color   io   ar   java   for   

原文地址:http://www.cnblogs.com/hrhguanli/p/3996301.html

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