zoukankan      html  css  js  c++  java
  • 多选列表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>
  • 相关阅读:
    简单介绍ps切片工具切图技巧
    ps选区工具应用
    【Photoshop基本概念知识】
    jQuery上传插件Uploadify使用详解
    PS非主流头发效果
    C#正则表达式整理备忘
    C#中利用正则表达式实现字符串搜索
    PS快捷键大全
    PS操作速查
    Photoshop CS2 菜单入门介绍
  • 原文地址:https://www.cnblogs.com/hanxianlong/p/1426095.html
Copyright © 2011-2022 走看看