实现效果：
代码：
<!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>JS实现将一个文本框的移动到另一个文本框</title>
<script>
function $(id){return document.getElementById(id);}
//全部右移 >>
function RightMoveAll()
{
var con_data=[];
//将左边的所有值都放到临时数据
for(var i=0;i<$("left_").length;i++)
{
con_data[con_data.length]=[$("left_").options[i].value,$("left_").options[i].text];
}
$("right_").length=$("right_").length;
//把临时数据里面的值放到右边
for(var i=0;i<con_data.length;i++)
{
$("right_").options[$("right_").length]=new Option(con_data[i][1],con_data[i][0]);
}
//把左边的数据给清空掉
for(var i=$("left_").length-1;i>=0;i--)
{
$("left_").removeChild($("left_").options[i]);
}
}
//全部左移 <<
function LeftMoveAll()
{
var con_data=[];
//将右边的所有值都放到临时数据
for(var i=0;i<$("right_").length;i++)
{
con_data[con_data.length]=[$("right_").options[i].value,$("right_").options[i].text];
}
//把临时数据里面的值放到左边
for(var i=0;i<con_data.length;i++)
{
$("left_").options[$("left_").length]=new Option(con_data[i][1],con_data[i][0]);
}
//把右边的数据给清空掉
for(var i=$("right_").length-1;i>=0;i--)
{
$("right_").removeChild($("right_").options[i]);
}
}
//将左边的移动到右边，并删掉左边的数据
function RightMove()
{
var con_data=[];
var index_data=[];
//看选中的是哪一个值
for(var i=0;i<$("left_").length;i++)
{
if($("left_").options[i].selected)
{
con_data[con_data.length]=[$("left_").options[i].value,$("left_").options[i].text];
index_data[index_data.length]=[i];
}
}
for(var i=0;i<con_data.length;i++)
{
var con_fla=true;
for(var k=0;k<$("right_").length;k++)
{
if(con_data[i][0]==$("right_").options[k].value)
con_fla=false;
}
if(con_fla)
$("right_").options[$("right_").length]=new Option(con_data[i][1],con_data[i][0]);
}
for(var i=index_data.length-1;i>=0;i--)
{
$("left_").removeChild($("left_").options[index_data[i]]);
}
}
//将右边的数据全部移动到左边，并删除右边的数据
function LeftMove()
{
var con_data=[];
var index_data=[];
//看选中的是哪一个值
for(var i=0;i<$("right_").length;i++)
{
if($("right_").options[i].selected)
{
con_data[con_data.length]=[$("right_").options[i].value,$("right_").options[i].text];
index_data[index_data.length]=[i];
}
}
for(var i=0;i<con_data.length;i++)
{
var con_fla=true;
for(var k=0;k<$("left_").length;k++)
{
if(con_data[i][0]==$("left_").options[k].value)
con_fla=false;
}
if(con_fla)
$("left_").options[$("left_").length]=new Option(con_data[i][1],con_data[i][0]);
}
for(var i=index_data.length-1;i>=0;i--)
{
$("right_").removeChild($("right_").options[index_data[i]]);
}
}
</script>
<body>
<table width="355" height="192" border="1">
<tr>
<td width="128" align="center" valign="middle">
<select name="left_" size="7" multiple="multiple" id="left_" style="width:100px;">
<option value="辽宁省">辽宁省</option>
<option value="吉林省">吉林省</option>
<option value="黑龙江省">黑龙江省</option>
<option value="陕西省">陕西省</option>
<option value="江苏省">江苏省</option>
<option value="广东省">广东省</option>
</select>
</td>
<td width="101" align="center" valign="middle">
<input type="button" name="rMoveAll" value=" >> " onclick="RightMoveAll();" />
<input type="button" name="rMove" value=" > " onclick="RightMove();" />
<input type="button" name="lMove" value=" < " onclick="LeftMove();" />
<input type="button" name="lMoveAll" value=" << " onclick="LeftMoveAll();" />
</td>
<td width="128" align="center" valign="middle">
<select name="right_" size="7" multiple="multiple" id="right_" style="width:100px;"></select>
</td>
</tr>
</table>
</body>
</html>
改得有些乱，仅供参考。