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

双击任一Select控件,查看效果:

源码:

<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;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;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>
原文地址:https://www.cnblogs.com/hanxianlong/p/1426095.html