<html>
<head>
<title>多选移动列表操作</title>
<meta http-equiv='Content-Type' content='text/css;charset=utf-8'/>
<script>
</script>
<style>
.yemian{
margin-left:30%;
500px;
height:400px;
background-color:cyan;
}
.s{
150px;
height:250px;
}
.input{
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>
