js左移右移

function add(oSourceSel,oTargetSel ){
     var arrSelValue = new Array();
     var arrSelText = new Array();
     var arrValueTextRelation = new Array();
     var index = 0;
     for(var i=0; i<oSourceSel.options.length; i++)
     {
         if(oSourceSel.options[i].selected)
         {
             arrSelValue[index] = oSourceSel.options[i].value;
             arrSelText[index] = oSourceSel.options[i].text;
             arrValueTextRelation[arrSelValue[index]] = oSourceSel.options[i];
             index ++;
         }
     }
     for(var i=0; i<arrSelText.length; i++)
     {
         var oOption = document.createElement("option");
         oOption.text = arrSelText[i];
         oOption.value = arrSelValue[i];
         oTargetSel.add(oOption);
         oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]);
     }
  }   

<td rowspan="2" valign="top" align="right" width="136">&nbsp;
<select name="allItem" size="12" id="allItem" multiple style="width: 120px;" onclick="onClickAdd();">
<c:forEach var="item" items="${allAttrItemList}" varStatus="status">
<option value="${item.attrId}">${item.name}</option>
</c:forEach>
</select>
</td>
<td valign="bottom" align="left" width="55" height="82"><button type="button" name="addBut"  id="addBut"  class="normBtn" onclick="add(document.all.allItem,document.all.refItem);" disabled><span>添加&gt;&gt;</span></button></td>
<td rowspan="2" align="left" valign="top" width="729">
<select name="refItem" size="12" id="refItem" multiple style="width: 120px;" onclick="onClickRemove();">
<c:forEach var="item" items="${attrGRPRelItemList}" varStatus="status">
<option value="${item.attrId}">${item.name}</option>
</c:forEach>
</select>
</td>
</tr>