首先是穿梭框的基本样式

分别由左边框，穿梭按钮和右边框组成

而穿梭框的功能是点击按钮时，框内的内容能够穿梭到其他的框

废话不多说，上代码

1.穿梭框的基本结构

 <!-- 穿梭框基本结构 --> 
    <div class="container">
        <!-- 左侧框 -->
        <div class="left">
            <h3>xxx的现任女友</h3>
            <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">
            <h3>xxx的前女友</h3>
            <select id="sel2" multiple>
                <option value="6">坤坤</option>
            </select>
        </div>
    </div>

2.穿梭框的基本样式

<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>

3.穿梭框的右穿梭和左穿梭

 <script>
        // 定义变量来保存要穿梭的值
        var value = null;
        // 左侧框
        var Os1 = document.getElementById("sel1")
            // 右侧框
        var Os2 = document.getElementById("sel2")
            // 右移动选中的
        var Or = document.getElementById("btnToRight")
            // 右移动全部
        var OrA = document.getElementById("btnToRightAll")
            // 左移动选中的
        var Ol = document.getElementById("btnToLeft")
            // 左移动全部
        var OlA = document.getElementById("btnToLeftAll")

        // 右移动选中的按钮添加点击事件
        Or.onclick = function() {
            // 移动都是从当前列表的第一个数据进行移动
            // 判断当前列表第一个数据是否有数据
            if (Os1.children[0].innerHTML) {
                // 获取第一个数据的值
                value = Os1.children[0].innerHTML
                    // 删除包含第一个数据的标签
                Os1.children[0].remove();
                // 新创建一个标签
                Oop = document.createElement("option");
                // 将保存的数据放入该标签
                Oop.innerHTML = value;
                // 将该标签添加到另一个列表的最末尾
                Os2.appendChild(Oop)
            }

        }
		//与右移动基本相同
        Ol.onclick = function() {
            if (Os2.children[0].innerHTML) {
                value = Os2.children[0].innerHTML
                Os2.children[0].remove();
                Oop = document.createElement("option");
                Oop.innerHTML = value;
                Os1.appendChild(Oop)
            }
        }

		//给右移全部按钮添加点击事件
        OrA.onclick = function() {
            // 从尾到头获取列表节点标签的数据
            for (var i = Os1.children.length - 1; i >= 0; i--) {
                // 判断当前列表最后一个数据是否有数据
                if (Os1.children[i].innerHTML) {
                    // 获取最后一个的值
                    value = Os1.children[i].innerHTML;
                    // 删除包含最后一个数据的标签
                    Os1.children[i].remove();
                    //  新创建一个标签
                    Oop = document.createElement("option");
                    //  将保存的数据放入该标签
                    Oop.innerHTML = value;
                    // 将该标签添加到另一个列表的最末尾
                    Os2.appendChild(Oop)
                }
            }
        }

		//与右移全部基本相同
        OlA.onclick = function() {
            for (var i = Os2.children.length - 1; i >= 0; i--) {
                if (Os2.children[i].innerHTML) {
                    value = Os2.children[i].innerHTML
                    Os2.children[i].remove();
                    Oop = document.createElement("option");
                    Oop.innerHTML = value;
                    Os1.appendChild(Oop)
                }
            }
        }
    </script>