JS native implementation shuttle box

The first is the basic style of the shuttle box

Respectively by the left border , The shuttle button and the right border form

The function of the shuttle box is to click the button , The content in the box can shuttle to other boxes

I don't say much nonsense , Code up

1. Basic structure of shuttle box

 <!--  Basic structure of shuttle box  --> 
    <div class="container">
        <!--  Left box  -->
        <div class="left">
            <h3>xxx My current girlfriend </h3>
            <select id="sel1" multiple>
                <option value="1"> Power </option>
                <option value="2"> tearful </option>
                <option value="3"> Chunchun </option>
                <option value="4"> Yingying </option>
                <option value="5"> Red red </option>
            </select>
        </div>

        <!--  Shuttle button  -->
        <div class="left mid">
            <p>
                <button id="btnToRight" title=" Move the selected right ">&gt;&gt;</button>
            </p>
            <p>
                <button id="btnToRightAll" title=" Move all right ">&gt;&gt;|</button>
            </p>
            <p>
                <button id="btnToLeft" title=" Move the selected left ">&lt;&lt;</button>
            </p>
            <p>
                <button id="btnToLeftAll" title=" Move left all ">|&lt;&lt;</button>
            </p>
        </div>

        <!--  Right side box  -->
        <div class="left">
            <h3>xxx My ex girlfriend </h3>
            <select id="sel2" multiple>
                <option value="6"> Hyk </option>
            </select>
        </div>
    </div>

2. Basic style of shuttle box 

<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. Shuttle box right shuttle and left shuttle

 <script>
        //  Define variables to hold the values to shuttle 
        var value = null;
        //  Left box 
        var Os1 = document.getElementById("sel1")
            //  Right side box 
        var Os2 = document.getElementById("sel2")
            //  Move the selected right 
        var Or = document.getElementById("btnToRight")
            //  Move all right 
        var OrA = document.getElementById("btnToRightAll")
            //  Move the selected left 
        var Ol = document.getElementById("btnToLeft")
            //  Move left all 
        var OlA = document.getElementById("btnToLeftAll")

        //  Move the selected button to the right to add a click event 
        Or.onclick = function() {
    
            //  All moves are from the first data in the current list 
            //  Judge whether the first data in the current list has data 
            if (Os1.children[0].innerHTML) {
    
                //  Get the value of the first data 
                value = Os1.children[0].innerHTML
                    //  Delete the tag containing the first data 
                Os1.children[0].remove();
                //  Create a new label 
                Oop = document.createElement("option");
                //  Put the saved data into the label 
                Oop.innerHTML = value;
                //  Add this tag to the end of another list 
                Os2.appendChild(Oop)
            }

        }
		// It is basically the same as moving right 
        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)
            }
        }

		// Add a click event to the move right all button 
        OrA.onclick = function() {
    
            //  Get the data of the list node label from end to end 
            for (var i = Os1.children.length - 1; i >= 0; i--) {
    
                //  Judge whether the last data in the current list has data 
                if (Os1.children[i].innerHTML) {
    
                    //  Get the value of the last 
                    value = Os1.children[i].innerHTML;
                    //  Delete the tag containing the last data 
                    Os1.children[i].remove();
                    //  Create a new label 
                    Oop = document.createElement("option");
                    //  Put the saved data into the label 
                    Oop.innerHTML = value;
                    //  Add this tag to the end of another list 
                    Os2.appendChild(Oop)
                }
            }
        }

		// It is basically the same as moving right 
        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>