zoukankan      html  css  js  c++  java
  • JavaScript 下拉框 左边添加至右边

    关于如何实现右边下拉框中选项的排序一时没有好的解决方法,等想到了回来补充

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="jquery-3.3.1.min.js"></script>
        <style>
            #select1 {
                margin-left: 20px;
            }
            #select2{
                margin-left: 20px;
            }
            span{
                display: block;
                border: 1px solid orange;
                width: 135px;
                background-color: coral;
                color: whitesmoke;
                box-shadow: 1px 1px 10.1px salmon;
                margin-bottom: 5px;
                margin-top: 5px;
                cursor: pointer;
            }
            .container2{
                position: absolute;
                left:200px;
                top: 8px;
            }
        </style>
    </head>
    <body>
        <div class="container1">
            <select multiple name="" id="select1"  style="100px;height:150px;">
                <!-- multiple:使下拉框能够同时拖选多个选项 -->
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option  value="10">10</option>
            </select>
            <div>
                <span id="add">选中添加到右边&gt;&gt;</span>
                <span id="addAll">全部添加到右边&gt;&gt;</span>
            </div>
        </div>
        <div class="container2">
            <select multiple name="" id="select2"  style="100px;height:150px;">      
            </select>
            <div>
                <span id="remove">选中删除到左边&lt;&lt;</span>
                <span id="removeAll">全部删除到左边&lt;&lt;</span>
            </div>
        </div>
        <script>
            window.onload = function(){
                var addBtn = document.getElementById("add");
                var addAll = document.getElementById("addAll");
                var container = document.getElementsByClassName("container1")[0];
                var options = container.getElementsByTagName("option");
                var select1 = document.getElementById("select1");
                var select2 = document.getElementById("select2");
                var optSore = [];
                var valueStore = [];
                console.log(options);
                function addToRight(){
                    var i = 0;
                    for(i=0;i<options.length;i++){
                        if(options[i].selected){//别用.getAttrbute("selected")
                            // valueStore.push(options[i].value);
                            // optSore.push(options[i]);
                            console.log(options[i]);
                            var move =  select1.removeChild(options[i]);
                            console.log(move);
                            select2.appendChild(move);
                            
                            i = i - 1;
                            //@解决了!options是左边容器中的选项列表,每次移除一个选项后,紧跟在后面的选项就会上移,
                            //所以要将这里的i前移一位 明天补个示意图
                        }
                    }
                    console.log(optSore,valueStore);
                }
                function addAllOpt(){
                    var i = 0;
                    for(i;i<options.length;i++){
                        optSore.push(options[i]);
                        valueStore.push(options[i].value);
                    }
                    console.log(optSore,valueStore);
                }
    
                addBtn.addEventListener("click",addToRight,false);
                addAll.addEventListener("click",addAllOpt,false);
            }
        </script>
        <script>
            // $(function(){
            //     $("#add").click(function(){
            //     var $selectedOpt = $("#select1 option:selected");
            //     var $remove = $selectedOpt.remove();//我惊了 你呢 原生js有这种操作吗
            //     $remove.prop("selected",false)//不然添加过去后会停留在被选中的状态
            //     .appendTo("#select2");
            // });
            //     $("#addAll").click(function(){
            //         var $removeAll = $("#select1 option").remove();
            //         $removeAll.appendTo("#select2");
            // })
            // });
        </script>
    </body>
    </html>
  • 相关阅读:
    HDU2027 统计元音 一点点哈希思想
    湖南工业大学第一届ACM竞赛 数字游戏 字符串处理
    湖南工业大学第一届ACM竞赛 我素故我在 DFS
    HDU3293sort
    HDU2082 找单词 母函数
    HDU1018 Big Number 斯特林公式
    湖南工业大学第一届ACM竞赛 分糖果 位操作
    UVA 357 Let Me Count The Ways
    UVA 147 Dollars
    UVA 348 Optimal Array Multiplication Sequence
  • 原文地址:https://www.cnblogs.com/linbudu/p/10630355.html
Copyright © 2011-2022 走看看