Move Items Between Two Select Lists Vanilla JS

index.html

<!--
 Simplified version of this https://esausilva.com/2016/01/29/move-items-between-two-listbox-using-jquery-html-select-tag/ but using only vanilla JavaScript in script tag
-->
<div class="subject-info-box-1">
  <select multiple="multiple" id='lstBox1' class="form-control">
    <option value="ajax">Ajax</option>
    <option value="jquery">jQuery</option>
    <option value="javascript">JavaScript</option>
    <option value="mootool">MooTools</option>
    <option value="prototype">Prototype</option>
    <option value="dojo">Dojo</option>
  </select>
</div>

<div class="subject-info-arrows text-center">
  <input type="button" id="btnAllRight" value=">>" class="btn btn-default" disabled /><br />
  <input type="button" id="btnRight" value=">" class="btn btn-default" /><br />
  <input type="button" id="btnLeft" value="<" class="btn btn-default" disabled /><br />
  <input type="button" id="btnAllLeft" value="<<" class="btn btn-default" disabled />
</div>

<div class="subject-info-box-2">
  <select multiple="multiple" id='lstBox2' class="form-control">
    <option value="asp">ASP.NET</option>
    <option value="c#">C#</option>
    <option value="vb">VB.NET</option>
    <option value="java">Java</option>
    <option value="php">PHP</option>
    <option value="python">Python</option>
  </select>
</div>

<div class="clearfix"></div>

<script>
    document.getElementById('btnRight').addEventListener('click', function(e) {
      var options = document.getElementById('lstBox1').options;
      var selectedOpts = [];
      
      for(var i=0; i < options.length; i++) {
        if (options[i].selected) {
          selectedOpts.push(options[i]);
        }
      }
      
      if (selectedOpts.length == 0) {
        alert("Nothing to move.");
        e.preventDefault();
      }
      
      var lstBox2 = document.getElementById('lstBox2');
      
      selectedOpts.forEach(function(opt) {
        lstBox2.appendChild(opt);
      });
    })
</script>

move-items-between-two-select-lists-vanilla-js.markdown

Move Items Between Two Select Lists Vanilla JS

A Pen by Esau Silva on CodePen.

License.

style.scss

.subject-info-box-1,
.subject-info-box-2 {
    float: left;
    width: 45%;
    
    select {
        height: 200px;
        padding: 0;
        option {
            padding: 4px 10px 4px 10px;
        }
        option:hover {
            background: #EEEEEE;
        }
    }
}
.subject-info-arrows {
    float: left;
    width: 10%;
    input {
        width: 70%;
        margin-bottom: 5px;
    }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />