<!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>
<script type="text/javascript">
function fun1()
{
var arrform=document.getElementById("left");
var arrto=document.getElementById("right");
//对象的数据集
arr=arrform.options;
//向右侧增加选中的数据
for(i=0;i<arr.length;i++)
{
//判断是否被选中
if(arr[i].selected)
{
arrto.options.add(new Option(arr[i].text,arr[i].value));
}
}
//删除选中的数据
for(i=0;i<=arr.length-1;i++)
{
if(arr[i].selected)
{
//移除掉左侧的数据;参数是选项
arrform.remove(i);
}
}
}
function fun2()
{
var arrform=document.getElementById("left");
var arrto=document.getElementById("right");
//对象的数据集
arr=arrto.options;
//向右侧增加选中的数据
for(i=0;i<arr.length;i++)
{
//判断是否被选中
if(arr[i].selected)
{
arrform.options.add(new Option(arr[i].text,arr[i].value));
}
}
//删除选中的数据
for(i=0;i<=arr.length-1;i++)
{
if(arr[i].selected)
{
//移除掉左侧的数据;参数是选项
arrto.remove(i);
}
}
}
</script>
<style type="text/css">
select{ width:100px;}
</style>
</head>
<body>
<table>
<tr>
<td>
<select id="left" size="10">
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
</select>
</td>
<td>
<input type="button" value=">>>" onclick="fun1()" /><br /><br />
<input type="button" value="<<<" onclick="fun2()"/>
</td>
<td>
<select id="right" size="10">
</select>
</td>
</tr>
</table>
</body>
</html>
