选择框转移功能实现

最新推荐文章于 2024-11-01 12:26:05 发布

会写BUG的老中医

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量69

点赞数

文章标签： css webview html

本文链接：https://blog.csdn.net/m0_59310979/article/details/122847074

版权

本文介绍如何使用JavaScript实现在网页中，通过点击按钮控制两个select元素之间的选项同步移动。通过getSelectedOptions和appendToSelect函数，实现了选中项的左右切换和全选操作。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            overflow: hidden;
            width: 550px;
            margin: 0 auto;
        }

        .container .left {
            float: left;
            margin: 0 30px;
        }

        .container select {
            width: 100%;
            height: 200px;
        }

        .container .mid {
            padding-top: 70px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">
            <select id="sel1" multiple>
                <option value="1">幂幂</option>
                <option value="2">花花</option>
                <option value="3">春春</option>
                <option value="4">盈盈</option>
                <option value="5">红红</option>
            </select>
        </div>
        <div class="left mid">
            <p>
                <button id="btnToRight" title="右移动选中的">&gt;&gt;</button>
            </p>
            <p>
                <button id="btnToRightAll" title="右移动全部">&gt;&gt;|</button>
            </p>
            <p>
                <button id="btnToLeft" title="左移动选中的">&lt;&lt;</button>
            </p>
            <p>
                <button id="btnToLeftAll" title="左移动全部">|&lt;&lt;</button>
            </p>
        </div>
        <div class="left">
            <select id="sel2" multiple>
                <option value="6">坤坤</option>
            </select>
        </div>
    </div>

    <script>
        var btnLeft = document.getElementById("btnToLeft"),
            btnRight = document.getElementById("btnToRight"),
            btnLeftAll = document.getElementById("btnToLeftAll"),
            btnRightAll = document.getElementById("btnToRightAll"),
            selLeft = document.getElementById("sel1"),
            selRight = document.getElementById("sel2");

        //得到某个select元素内部被选中的option数组
        function getSelectedOptions(sel) {
            // return Array.from(sel.children).filter(function(item) {
            //     return item.selected;
            // });
            var opts = [];
            for (var i = 0; i < sel.children.length; i++) {
                if (sel.children[i].selected) {
                    opts.push(sel.children[i]);
                }
            }
            return opts;
        }

        //将option数组中的东西添加到制定的select中
        //opts: 要添加的option数组
        //sel：要添加到的select元素
        function appendToSelect(opts, sel) {
            opts = Array.from(opts);
            var frag = document.createDocumentFragment();
            for (var i = 0; i < opts.length; i++) {
                opts[i].selected = false;
                frag.appendChild(opts[i]);
            }
            sel.appendChild(frag);
        }

        btnLeft.onclick = function() {
            //获取右边选中的
            var opts = getSelectedOptions(selRight);
            //循环将该数组添加到左边的select中
            appendToSelect(opts, selLeft);
        }

        btnRight.onclick = function() {
            //获取右边选中的
            var opts = getSelectedOptions(selLeft);
            //循环将该数组添加到左边的select中
            appendToSelect(opts, selRight);
        }

        btnLeftAll.onclick = function() {
            appendToSelect(selRight.children, selLeft);
        }

        btnRightAll.onclick = function() {
            appendToSelect(selLeft.children, selRight);
        }
    </script>
</body>

</html>