给你个例子:
<html>
<head>
<script language="javascript">
<!--
   function LinkedDropList(oSelA,oSelB){
     var dropList1    = oSelA
     var dropList2    = oSelB
     var autoRemove   = true
     var ignoreRepeat = false
     
     //+-------------------------------------------------
     this.setAutoRemove=function(bStatus){
       autoRemove = ("boolean" == typeof(bStatus) ? bStatus : false)
     }
     
     //+--------------------------------------------------
     this.setIgnoreRepeat=function(bStatus){
       ignoreRepeat = ("boolean" == typeof(bStatus) ? bStatus : false)
     }
     
     //+--------------------------------------------------
     this.move=function(sDirection,nIndex){
        if(sDirection=='forward'){
          moveForward(nIndex)
        }
        else{
          moveBack(nIndex)
        }
      }
   
     this.moveAll=function(sDirection){
       var oSrc,nTotal
    
       if(sDirection=='forward'){
         nTotal=dropList1.length
       }
       else{
         nTotal=dropList2.length
       }
     
       for(var i = 0;i < nTotal;i ++){
         if (!autoRemove){
           this.move(sDirection,i)
         }
         else{
           this.move(sDirection,0)
         }
       }
   
   }
   
   //+-------------------------------------------------
   function moveBack(nIndex){
      move(dropList2,dropList1,nIndex)
   }
   
   //+-------------------------------------------------
   function moveForward(nIndex){
     move(dropList1,dropList2,nIndex)
   }
   
   //+--------------------------------------------------
   function move(oSrc,oTagert,nIndex){
     var oCurOption
   
     if(typeof(nIndex)=="undefined"){
 
        if (-1 == oSrc.selectedIndex)
          return
        oCurOption=oSrc.options[oSrc.selectedIndex]
     }
     else{
        oCurOption=oSrc.options[nIndex]
     }
  
     //check if it has added
     if (!ignoreRepeat){
        for(var i=0;i<oTagert.length;i++){
          if(oCurOption.value == oTagert.options[i].value){
             alert(oTagert.options[i].value)
             oTagert.options[i].selected=true
             return
          }
         }
     }
     
     //move element
     oTagert.appendChild(oCurOption.cloneNode(true))
     if(autoRemove){
        oSrc.removeChild(oCurOption)
     }
   }
   
   dropList1.ondblclick = moveForward
   dropList2.ondblclick = moveBack
   
}var ld
function window.onload(){
  ld = new LinkedDropList(selA,selB)}
//-->
</script>
<title></title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body>
<select id="selA" size="5" style ="width:150">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<select id="selB" NAME="Select1" style ="width:150" size="5">
</select>
<br>
<input type="button" value=">" onclick="ld.move('forward')"> 
<input type="button" value="<" onclick="ld.move('back')">
<input type="button" value=">>" onclick="ld.moveAll('forward')"> 
<input type="button" value="<<" onclick="ld.moveAll('back')">
<input type="checkbox"   onclick="ld.setIgnoreRepeat(this.checked)">忽略重复值 
<input type="checkbox" checked onclick="ld.setAutoRemove(this.checked)">自动删除原选项
</body>
</html>