• 多选列表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>
  • 相关阅读:
    从官方下载 Bootstrap 版本 并写 第一个页面
    南阳477
    南阳463
    南阳455
    南阳399
    南阳276
    南阳275
    南阳268
    南阳264
    南阳263
  • 原文地址:https://www.cnblogs.com/superfeeling/p/4726989.html
Copyright © 2020-2023  润新知