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"> 
<select name="allItem" size="12" id="allItem" multiple style="width: 120px;" οnclick="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" οnclick="add(document.all.allItem,document.all.refItem);" disabled><span>添加>></span></button></td>
<td rowspan="2" align="left" valign="top" width="729">
<select name="refItem" size="12" id="refItem" multiple style="width: 120px;" οnclick="onClickRemove();">
<c:forEach var="item" items="${attrGRPRelItemList}" varStatus="status">
<option value="${item.attrId}">${item.name}</option>
</c:forEach>
</select>
</td>
</tr>