Move Items Between Two Select Lists Using jQuery – HTML Select Tag

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.

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>

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

JSFiddle

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.



 

Esau Silva
Software Engineer at Region One ESC
Full Stack Software Engineer working with Microsoft technologies, ReactJS is awesome and avid Brazilian Jiu-Jitsu practitioner
Spread the love

5 thoughts on “Move Items Between Two Select Lists Using jQuery – HTML Select Tag

  1. aditya says:

    good post

  2. Rakesh says:

    sir please send me the code of above program full

Leave a Reply

Your email address will not be published. Required fields are marked *