zoukankan      html  css  js  c++  java
  • select的option选项左右移动

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #choice,#box_L,#box_R{
                display: inline-block;
            }
            #choice{
                top: 20px;
            }
        </style>
    </head>
    <body>
    
        <div id="box_L">
            <select id="left" multiple size="10">
                <option>请选:</option>
                <option>选项2</option>
                <option>选项3</option>
                <option>选项4</option>
                <option>选项5</option>
                <option>选项6</option>
            </select>
        </div>
    <div id="choice">
        <input type="button" value="------>" onclick="adds()"><br>
        <input type="button" value="======>" onclick="addall()"><br>
        <input type="button" value="<------" onclick="restore()"><br>
        <input type="button" value="<======" onclick="allrestore()"><br>
    </div>
    
        <div id="box_R">
            <select id="right" multiple size="10">
            <option>请选:</option>
            </select>
        </div>
    </body>
    <script>
    
        var left = document.getElementById("left");
        var right = document.getElementById("right");
    
        function adds() {
            var options = left.children;
            for(var i =0;i<options.length;i++) {
                if (options[i].selected === true) { //单选
                    options[i].selected = false;   //这个主要是把选项选过去后取消他的选中状态
                    right.appendChild(options[i]);
    
                }
            }
        }
    
        function addall() {
            var options = left.children;
            for(var i =0;i<options.length;i++) {
                right.appendChild(options[i]);
                i--;
            }
        }
        function restore() {
            var options = right.children;
            for (var i=0;i<options.length;i++){
                if(options[i].selected ===true){
                    options[i].selected=false;
                    left.appendChild(options[i]);
    
                }
            }
        }
        function allrestore() {
            var options = right.children;
            for(var i =0;i<options.length;i++) {
                left.appendChild(options[i]);
                i--;
            }
        }
    </script>
    </html>
  • 相关阅读:
    TRUNCATE TABLE 删除表中的所有行,而不记录单个行删除操作
    血腥!实况转播SQL注入全过程,让你知道危害有多大。
    DB2隔离级别设置
    使用解释工具分析SQL语句
    DB2的七种武器
    db2精华文档和论坛链接
    “饮水机”:形象比喻 深入浅出理解RAID
    DB2 数据库恢复测试
    IBM DB2 日常维护汇总
    镜像分割与高可用性灾难恢复
  • 原文地址:https://www.cnblogs.com/TKOPython/p/12839743.html
Copyright © 2011-2022 走看看