多选移动列表操作

浏览数：16 / 时间：2015年06月11日

<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>