JavaScript移动下拉框选项

效果如图：

< script type = " text/javascript " >
function  moveOptions(oSource, oTarget)  {
  while (oSource.selectedIndex > -1) {
    var opt = oSource.options[oSource.selectedIndex];
    var newOpt = document.createElement("OPTION");
    oTarget.appendChild(newOpt);
    newOpt.value = opt.value;
    newOpt.text = opt.text;
    newOpt.selected = true;
    oSource.removeChild(opt);
  }
}
</ script >

< div  style ="float:left;" >
已选： < br  />
< select  name ="projectMemberList"  multiple ="yes"  size ="9"  style ="width:100px;"  id ="projectMemberList" >
< option  value ="xxx" > x01 </ option >
< option  value ="xxx" > x02 </ option >
</ select >
</ div >
< div  style ="float:left;margin:0px 5px;" >
< br  />
< br  />
< br  />
< input  type ="button"  value ="<-添加"
onclick ="moveOptions(document.getElementById('userList'),document.getElementById('projectMemberList'));"   />
< br  />
< br  />
< input  type ="button"  value ="移除->"
onclick ="moveOptions(document.getElementById('projectMemberList'),document.getElementById('userList'));"   />
</ div >
< div  style ="float:left;" >
备选： < br  />
< select  multiple ="yes"  size ="9"  style ="width:100px;"  id ="userList" >
< option  value ="xxx" > x03 </ option >
< option  value ="xxx" > x04 </ option >
< option  value ="xxx" > x05 </ option >
< option  value ="xxx" > x06 </ option >
< option  value ="xxx" > x07 </ option >
< option  value ="xxx" > x08 </ option >
< option  value ="xxx" > x09 </ option >
< option  value ="xxx" > x10 </ option >
< option  value ="xxx" > x11 </ option >
</ select >
</ div >

from:http://www.iecn.cn/article-html-itemid-2284-type-blog.html