• DOM2练习


    左右互相输入

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                select{
                     60px;
                }
            </style>
        </head>
        <body>
            <select id="s1" size="7" multiple="multiple">
                <option>123</option>
                <option>456</option>
                <option>789</option>
            </select>
            <input type="button" value="向 右" id="btn-r" />
            <input type="button" value="向 左" id="btn-l" />
            <select id="s2" size="7" multiple="multiple">
                <option>abc</option>
                <option>xyz</option>
                <option>ijk</option>
            </select>
            
        </body>
    </html>
    <script>
        var s1 = document.getElementById("s1");
        var s2 = document.getElementById("s2");
        var btn_r = document.getElementById("btn-r");
        var btn_l = document.getElementById("btn-l");
      
            btn_r.onclick = function(){
                s2.appendChild(s1.selectedOptions[0]);
            }
       
     
            btn_l.onclick = function(){
                s1.appendChild(s2.selectedOptions[0]);
            }
       
    </script>

    可多项选择左右互取

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                select{
                     60px;
                }
            </style>
        </head>
        <body>
            <select id="s1" size="7" multiple="multiple">
                <option>123</option>
                <option>456</option>
                <option>789</option>
            </select>
            <input type="button" value="向 右" id="btn-r" />
            <input type="button" value="向 左" id="btn-l" />
            <select id="s2" size="7" multiple="multiple">
                <option>abc</option>
                <option>xyz</option>
                <option>ijk</option>
            </select>
            
        </body>
    </html>
    <script>
        var s1 = document.getElementById("s1");
        var s2 = document.getElementById("s2");
        var btn_r = document.getElementById("btn-r");
        var btn_l = document.getElementById("btn-l");
        
            btn_r.onclick = function(){
                for(var a = 0;true;a++){
                s2.appendChild(s1.selectedOptions[0]);
                }
            }
        
        
            btn_l.onclick = function(){
                for(var b = 0;true;b++){
                s1.appendChild(s2.selectedOptions[0]);
                }
            }
        
    </script>

  • 相关阅读:
    【SQLServer 】SQLServer Alwayson环境在主库节点移除数据库
    Docker安装PostgreSQL
    基于海康监控的图像识别设计
    光线补偿算法的实现
    基于SURF特征的图像与视频拼接技术的研究和实现(一)
    opencv透视变换
    反人脸识别的思路和实现
    自动对比度的opencv实现
    单向信息传输系统设计实现
    集成利用tesseract.exe进行ocr
  • 原文地址:https://www.cnblogs.com/zhangjinghe/p/7447295.html
Copyright © 2020-2023  润新知