我只写了向右移动的js,向左移同理
<div>
<center>
<table >
<tr>
<td valign="middle">
<select id="first" size="10" multiple="multiple">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>
<td valign="middle">
<input type="button" value="---->" id="add" style="vertical-align: top"/><br/>
<input type="button" value="==>" id="add_all" style="vertical-align: top"/>
</td>
<td valign="middle">
<select id="second" size="10" multiple="multiple">
<option value="选项9">选项9</option>
</select>
</td>
</tr>
</table>
</center>
</div>
<script type="text/javascript">
window.οnlοad=function(){
var firstSelect=document.getElementById("first");
var secondSelect=document.getElementById("second");
var firstOptions=firstSelect.getElementsByTagName("option");
//将长度定义在外边,长度为固定值,否则,随着往右移动,长度变化而i在增加会出现bug
var len=firstOptions.length;
/**********************************单个增加功能************************************/
document.getElementById("add").οnclick=function(){
for(var i=0;i<len;i++){
var firstOption=firstOptions[i];
if(firstSelect.selectedIndex!=-1){
secondSelect.appendChild(firstOptions[firstSelect.selectedIndex]);
}
}
}
/**********************************************************************************/
/**********************************全部增加功能************************************/
document.getElementById("add_all").οnclick=function(){
for(var i=0;i<len;i++){
secondSelect.appendChild(firstOptions[0]);
}
}
/**********************************************************************************/
/**********************************双击增加功能************************************/
firstSelect.οndblclick=function(){
//this代表当前对象
secondSelect.appendChild(this[this.selectedIndex]);
}
/**********************************************************************************/
}
用Jquery实现比较简单,首先引入文件;
单选实现:
$("#add").click(function(){
$("#second").append($("#first option:selected"));
});
全部实现:
$("#add_all").click(function(){
$("#second").append($("#first option"));
});
双击实现:$("#first option:selected ").dblclick(function(){
$("#second").append($(this));
});
</script>