注意:
option集合长度在每次添加完成时的减一
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#left1 {
float:left;
width:200px;
height:300px;
}
.size{
height:100px;
}
</style>
</head>
<body>
<div id="left1" >
<div id="selectTop" class="size">
<select multiple="multiple" id="select1" name="select1">
<option>我是左边1</option>
<option>我是左边2</option>
<option>我是左边3</option>
<option>我是左边4</option>
</select>
</div>
<br />
<div id="buttonBottom">
<input type="button" value="将选中的添加至右边>>" onclick="goRight()" />
<br />
<input type="button" value="将全部的添加至右边>>" onclick="allGoRight()" />
</div>
</div>
<div id="right1">
<div class="size">
<select multiple="multiple" id="select2">
<option>我是右边1</option>
<option>我是右边2</option>
<option>我是右边3</option>
<option>我是右边4</option>
</select>
</div>
<br />
<div>
<input type="button" value="<<将选中的添加至左边" onclick="goLeft()" />
<br />
<input type="button" value="<<将全部的添加至左边" onclick="allGoLeft()" />
</div>
</div>
<script type="text/javascript">
function goRight(){
var select1 = document.getElementById("select1");
var ops = select1.getElementsByTagName("option");
for(var i = 0; i < ops.length;i++){
var op = ops[i];
if (op.selected == true){
var select2 = document.getElementById("select2");
select2.appendChild(op);
i--;
}
}
}
function allGoRight(){
var select1 = document.getElementById("select1");
var ops = select1.getElementsByTagName("option");
for(var i = 0; i < ops.length;i++){
var op = ops[i];
var select2 = document.getElementById("select2");
select2.appendChild(op);
i--;
}
}
function goLeft(){
var select2 = document.getElementById("select2");
var ops = select2.getElementsByTagName("option");
for(var i = 0; i < ops.length;i++){
var op = ops[i];
if (op.selected == true){
var select1 = document.getElementById("select1");
select1.appendChild(op);
i--;
}
}
}
function allGoLeft(){
var select2 = document.getElementById("select2");
var ops = select2.getElementsByTagName("option");
for(var i = 0; i < ops.length;i++){
var op = ops[i];
var select1 = document.getElementById("select1");
select1.appendChild(op);
i--;
}
}
</script>
</body>
</html>