Move list box items from one box to another with jquery

While working with select boxes somewhere you need to use multiple selections and selecting multiple items from a bigger list is not user friendly. Here the idea is to make two select boxes and move items from one box to another. So it becomes more user friendly and looks good when it comes to UX.


It is quite easy to implement this with jquery. Just remove the item from one box and append to another.
You can move all items at once or you can move only selected items.

jQuery to move selected list box items from one box to another

 
  $('#from option:selected').remove().appendTo('#to'); 

jQuery to move all list box items from one box to another

 
  $('#from option').remove().appendTo('#to');

The above two lines of jquery does all the trick. Here is the full script. The jquery, css and the html.

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Move from one select box to another</title>
    <style type="text/css">
    select {
        width: 200px;
        float: left;
    }
    .controls {
        width: 40px;
        float: left;
        margin: 10px;
    }
    .controls a {
        background-color: #222222;
        border-radius: 4px;
        border: 2px solid #000;
        color: #ffffff;
        padding: 2px;
        font-size: 14px;
        text-decoration: none;
        display: inline-block;
        text-align: center;
        margin: 5px;
        width: 20px;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
    </script>
    <script>
    function moveAll(from, to) {
        $('#'+from+' option').remove().appendTo('#'+to); 
    }
    
    function moveSelected(from, to) {
        $('#'+from+' option:selected').remove().appendTo('#'+to); 
    }
    function selectAll() {
        $("select option").attr("selected","selected");
    }
    </script>
    </head>
    
    <body>

    <form name="selection" method="post" onSubmit="return selectAll()"> 
    <select multiple size="10" id="from">
      <option value="html">Html</option>
      <option value="css">Css</option>
      <option value="google">Google</option>
      <option value="javascript">Javascript</option>
      <option value="jquery">Jquery</option>
      <option value="regex">Regex</option>
      <option value="php">Php</option>
      <option value="mysql">Mysql</option>
      <option value="xml">Xml</option>
      <option value="json">Json</option>
    </select>
    <div class="controls"> 
        <a href="javascript:moveAll('from', 'to')">&gt;&gt;</a> 
        <a href="javascript:moveSelected('from', 'to')">&gt;</a> 
        <a href="javascript:moveSelected('to', 'from')">&lt;</a> 
        <a href="javascript:moveAll('to', 'from')" href="#">&lt;&lt;</a> </div>
    <select multiple id="to" size="10" name="topics[]"></select>
    <form> 
    </body>
    </html>

See the demo of the code.

>> > < <<
Move list box items from one box to another with jquery Move list box items from one box to another with jquery Reviewed by JS Pixels on December 06, 2013 Rating: 5

10 comments:

  1. Nice article , thank you

    ReplyDelete
  2. nice article.. how to get all the selected values in the to select box using php

    ReplyDelete
    Replies
    1. Hello Ram Kumar,

      You need to select all options when the form is submitted

      Use this function

      function selectAll() {
      $("select option").attr("selected","selected");
      }

      Call this function when your form is submitted like

      <form onSubmit="return selectAll()" method="post>
      ....
      ....
      ....
      </form>

      Thats it.
      You will get all values in an array named topics according to above code. By the way I have updated the article with the form and this new function

      Delete
  3. if we don't want to submit the from then , when selectAll() this function being called.

    ReplyDelete
  4. selectAll() this function can be call where except on submit from ,it can be call on any button click.

    ReplyDelete
  5. I want to drag and drop the option from one box to another box.
    Can you help me in that. Thanks in advance.

    ReplyDelete
  6. Altaf how to move if object as datatables/grid

    ReplyDelete
  7. Hi,

    How to move items back to its original place.i.e i need to to keep listbox in same order once i move from destination listbox to source listbox.

    ReplyDelete

Altaf Web. Powered by Blogger.