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>
  • 相关阅读:
    《Java数据结构与算法》笔记-CH4-5不带计数字段的循环队列
    《Java数据结构与算法》笔记-CH4-4循环队列
    效率方案:快速切换联调、测试、正式环境
    redis 安装、配置与测试
    计算机科学中的圣经
    自建主机
    正则表达式学习入门
    数据库查询语句缺失部分索引,引起的问题(20170209)
    redis 经验、问题以及其解决方案
    资讯周刊---20170210
  • 原文地址:https://www.cnblogs.com/superfeeling/p/4726989.html
Copyright © 2011-2022 走看看