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>
  • 相关阅读:
    TDSSNIClient initialization failed with error 0x7e, status code 0x60.
    SourceSafe Outof Memory
    机器学习(Part I)机器学习的种类
    机器学习PartIII:测试算法和NFL定理
    Google架构学习
    MediaWiki安装问题总结
    [转]IT项目管理实务
    几本关于统计学习的书
    Googlebot开始检索网站深层内容
    中文搜索引擎技术之网页排序
  • 原文地址:https://www.cnblogs.com/TKOPython/p/12839743.html
Copyright © 2011-2022 走看看