多选列表Select之双击删除与添加Demo

双击任一Select控件，查看效果：

srcAsrcBsrcCtargetAtargetBtargetC

源码：

 

< html >
< head >
     < script >
         function  removeItem(){
             var  sltSrc = document.getElementById( ' sltSrc ' );
             var  sltTarget = document.getElementById( ' sltTarget ' );
             for ( var  i = 0 ;i < sltSrc.options.length;i ++ )
            {
                 var  tempOption = sltSrc.options[i];
                 if (tempOption.selected){
                    sltSrc.removeChild(tempOption);
                    sltTarget.appendChild(tempOption);
                }    
            }
        }
        
         function  addItem(){
             var  sltSrc = document.getElementById( ' sltSrc ' );
             var  sltTarget = document.getElementById( ' sltTarget ' );
             for ( var  i = 0 ;i < sltTarget.options.length;i ++ )
            {
                 var  tempOption = sltTarget.options[i];
                 if (tempOption.selected){
                    sltTarget.removeChild(tempOption);
                    sltSrc.appendChild(tempOption);
                }    
            }
        }
         function  showSelectOptions(){
             var  sltTarget = document.getElementById( ' sltTarget ' );
             var  myhtml = "" ;
             for ( var  i = 0 ;i < sltTarget.options.length;i ++ )
            {
                myhtml  += " Select Item "   +  i  +   " :  text=  "   +  sltTarget.options[i].text  +   " , value= "   +  sltTarget.options[i].value  +   " <br/> " ;
            }
            document.getElementById( " showInfo " ).innerHTML = myhtml;
        }
     </ script >
</ head >
< body >
     < select  ondblclick ="removeItem();"  id ="sltSrc"  multiple ="true"  style ="height:150px;width:150px" >
         < option  value ="a" > srcA </ option >
         < option  value ="b" > srcB </ option >
         < option  value ="c" > srcC </ option >
     </ select >
     < select  ondblclick ="addItem();"  id ="sltTarget"   multiple ="true"  style ="height:150px;width:150px" >
         < option  value ="a" > targetA </ option >
         < option  value ="b" > targetB </ option >
         < option  value ="c" > targetC </ option >
     </ select >
     < div  id ="showInfo" ></ div >
     < input  type ="button"  value ="showSelectOptions"   onclick ="showSelectOptions();" />
</ body >
</ html >