左右两个下拉列表框的选项互移及获值效果

效果截图:


源代码:
 <script   language="JavaScript">  
  <!--  
  /*move(s1,s2,flag):s1是源列表框，s2是目的列表框，flag是是否全部移动*/  
  function   move(s1,s2,flag){  
  var   tem=new   Array();  
  var   sa=document.frm.elements[s1];  
  var   sb=document.frm.elements[s2];  
  var   s=sa.selectedIndex>-1?1:0  
  with(sa)  
  for(i=length-1;i>=0;i--)  
  if(options[i].selected||flag){tem[tem.length]=options[i];options[i]=null}  
  if(s||flag){  
  for(i=0;i<sb.length;i++)tem[tem.length]=sb.options[i]  
  with(sb){  
  length=0;  
  tem.sort(sortArr)  
  for(i=0;i<tem.length;i++)options[length]=new   Option(tem[i].text,tem[i].value)  
  }  
  }  
  }  
   
  /*显示列表框选中的值,s是列表框的name*/  
  function   show(s){  
  var   str=""  
  with(document.frm.elements[s])  
  for(i=0;i<length;i++)  
  if(options[i].selected)str+="\n第"+(i+1)+"个option:\ntext:"+options[i].text+"   value:"+options[i].value  
  alert(str)  
  }  
   
  function   sortArr(a,b){  
  if(a.text>b.text)return   1  
  if(a.text<b.text)return   -1  
  return   0  
  }  
  //-->  
  </script>   
  
  
  <form   name="frm">  
  <select   name="a"   size="5"   style="width:100"   multiple>  
  <option   value="a1">1</option>  
  <option   value="a2">2</option>  
  <option   value="a3">3</option>  
  <option   value="a4">4</option>  
  </select>  
  <input   type=button   value=">>"   onclick="move('a','b',1)">  
  <input   type=button   value="   >   "   onclick="move('a','b')">  
  <input   type=button   value="   <   "   onclick="move('b','a')">  
  <input   type=button   value="<<"   onclick="move('b','a',1)">  
  <select   name="b"   size="5"   style="width:100"   multiple>  
  <option   value="b1">a</option>  
  <option   value="b2">b</option>  
  <option   value="b3">c</option>  
  <option   value="b4">d</option>  
  <option   value="b5">e</option>  
  </select><br/>  

  <input   type=button   value="get   a's   value"   onclick="show('a')">  
  <input   type=button   value="get   b's   value"   onclick="show('b')">  
  </form>