用select框用来选中,select框中的属性multiple="multiple"为可多选
<div id="data" align="left">
//左边的列表框
<select multiple="multiple" size="10"id="ldatas">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>
<option>选项7</option>
<option>选项8</option>
</select>
</div>
//中间的方向按钮
<div>
//向右移动按钮,可以移动一个,也可以移动多个
<input type="button" id="rMove"value="--->"/>
//向右移动全部
<input type="button" id="rMoveAll"value="--->>"/><br/>
//向左移动按钮,可以移动一个,也可以移动多个
<input type="button" id="lMove"value="<---"/>
//向左移动全部 <为转义字符,代表 <
<input type="button" id="lMoveAll"value="<<---"/>
</div>
<div>
//右边的列表框
<select multiple="multiple" size="10"id="rdatas">
</select>
</div>
//全部向右移
//select节点对象获取
var ldatasNode=get("ldatas");//左边的下拉列表框
//获取节点下面的所有的option节点对象
var loptionsNode=ldatasNode.getElementsByTagName("option");//获取了列表中的所有选项
//获取右移的节点对象
var rMoveAllNode=get("rMoveAll");//向右移的按钮
//添加事件
rMoveAllNode.οnclick=function(){
//获取要添加的节点对象
var rdatasNode=get("rdatas");
var lengths=loptionsNode.length;//如果放到循环中,它是一个变值,所以循环的次数不够
for(var i=0;i<lengths;i++){
//把idatasNode 个数10 始终移第一个
rdatasNode.appendChild(loptionsNode[0]);
}
}
//---->右
var rMoveNode=get("rMove");
rMoveNode.οnclick=function(){
//获取左边节点中的所有options 然后再获取被选中的option对象
var ldatasNode=get("ldatas");
var loptionsNode=ldatasNode.getElementsByTagName("option");
//获取右边节点对象
var rdatasNode=get("rdatas");
for(var i=0;i<loptionsNode.length;i++){
if(loptionsNode[i].selected){
rdatasNode.appendChild(loptionsNode[i]);
//当把第一个移除时,i变为1,需要移动的第二个此时已经在原来的第一个的位置了,在移除第二个时,实际移动的是第三个
i--;
}
}
}
注:function get(id){
return document.getElementById(id);
}