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.

Listboxes
Listboxes

[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.dark


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]

Spread the love

15 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

  3. Danny says:

    Very useful, thanks

  4. Nick says:

    Is it possible to do this using only Javascript inside an html file? I’m working with a very limited system so I can’t have a multifile structure or jquery.

    • jgezau says:

      Yes, it is completely possible to do it without jQuery. Refer to this CodePen. In this example I only implement the “move to right” button, but you can easily copy-paste-modify the code to implement the rest of the buttons. Hope this helps

      • Shashank says:

        But it is throwing an Uncaught Type Error,i.e
        “Uncaught TypeError: Cannot read property ‘addEventListener’ of null”….
        How to resolve it??

        • Shashank says:

          Hey! I have resolved the above error, But how can I sort the moved items?? Can you please help me out??

          • esausilva says:

            Visit the codepen to see the updated code for sorting. https://codepen.io/esausilva/pen/NYObRr?editors=1010

            • Shashank says:

              Hey! Thanks alot
              But this sorting is working only for a single digit number. When I want to sort a two digit number, it is being sorted on the basis of their tenth digit.

              e.g., list1=[1,2,3,4,5,6] and list2=[8,11,23,37] and when I move 6 to list2, list2 is sorted in such a way that it appears like list2=[11,23,37,6,8] i.e., being sorted on the basis of its first digit.

              Hope you understood my problem and can you please help me out ASAP.

              • esausilva says:

                Just convert the values to integer in the sorting function (strDes) then the sorting will work fine. This is how you convert to integer https://gomakethings.com/converting-strings-to-numbers-with-vanilla-javascript/

                • Shashank says:

                  Hey! can you please elaborate it???
                  These are the changes which I did in sorting function (strDes) by using parseInt function :-

                  function strDes(a, b) {
                  var a = parseInt(a, 10);
                  var b = parseInt(b, 10);

                  if (a.value > b.value) return 1;
                  else if (a.value < b.value) return -1;
                  else return 0;
                  }

                  console.clear();

                  But now the previous sorting function isn't also working.
                  Actually I am new to JS, so can you please help me out ASAP…

                  • esausilva says:

                    Almost, this is the correct function:

                    function strDes(a, b) {
                      var valueA = parseInt(a.value, 10);
                      var valueB = parseInt(b.value, 10);
                    
                      if (valueA > valueB) return 1;
                      else if (valueA < valueB) return -1;
                      else return 0;
                    }
                    

                    If you do console.log(a) inside the function you will get the actual HTML element <option value="6">6</option> but you need the value contained in the option element. so hence we type a.value and b.value.

                    Now, do console.log(a.value) you will get only the value and not the actual HTML element.

                    Hope this helps

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.