<!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{ 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>