Beautiful and simple implementation of two Select Lists (HTML Select Tags) to select multiple items from one ListBox to another.

Select a single or multiple items from one Select List and move it to the other Select List, you also have the ability to move all of the items at once.

[topads][/topads]

One thing to notes is that you need bootstrap for some of the base styling of the Select Lists.

Refer to the jQuery plugin (jQuery.SelectListActions.js) I created that covers moving items between two select lists and also moving items up/down a list, removing items in a list and more.

HTML

<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" /><br />
  <input type='button' id='btnRight' value='>' class="btn btn-default" /><br />
  <input type='button' id='btnLeft' value='<' class="btn btn-default" /><br />
  <input type='button' id='btnAllLeft' value='<<' class="btn btn-default" />
</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>

[signupform][/signupform]

LESS / 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;
    }
}

jQuery

(function () {
  $("#btnRight").click(function (e) {
    var selectedOpts = $("#lstBox1 option:selected");
    if (selectedOpts.length == 0) {
      alert("Nothing to move.");
      e.preventDefault();
    }

    $("#lstBox2").append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
  });

  $("#btnAllRight").click(function (e) {
    var selectedOpts = $("#lstBox1 option");
    if (selectedOpts.length == 0) {
      alert("Nothing to move.");
      e.preventDefault();
    }

    $("#lstBox2").append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
  });

  $("#btnLeft").click(function (e) {
    var selectedOpts = $("#lstBox2 option:selected");
    if (selectedOpts.length == 0) {
      alert("Nothing to move.");
      e.preventDefault();
    }

    $("#lstBox1").append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
  });

  $("#btnAllLeft").click(function (e) {
    var selectedOpts = $("#lstBox2 option");
    if (selectedOpts.length == 0) {
      alert("Nothing to move.");
      e.preventDefault();
    }

    $("#lstBox1").append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
  });
})(jQuery);

See it in Action

See the Pen Move Items Between Two Select Lists Using jQuery by Esau Silva (@esausilva) on CodePen.

---

Credit: This snippet was originally created by jquerybyexample and I modified it to add two extra buttons (Move everything to left/right) and applied a much better styling.

---

Consider giving back by getting me a coffee (or a couple) by clicking the following button:

[bottomads][/bottomads]