Apr 29, 2010

Posted by in JQuery | 25 comments

Move list box items from left to right using JQuery

Sample output of moving listbox items Left<->Right

Sample output of moving listbox items Left<->Right

Hello Guys,

Sometimes we used to get requirements where we wants to move items from a multiple select box (list box) to another list box in the right and vice versa. Something like the picture below.

So, here I have come-up with a JQuery function which will do the task for you.

Here is how we can use it

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
   
    /*
    Auther :: Dharmendra Patri
    Email  :: admin@icymic.com
    Site   :: http://lovewithbug.com
              http://forthera.com
    */

   
    /*
    @param1 - sourceid - This is the id of the multiple select box whose item has to be moved.
    @param2 - destinationid - This is the id of the multiple select box to where the iterms should be moved.
  */

 
  //this will move selected items from source list to destination list     
  function move_list_items(sourceid, destinationid)
  {
    $("#"+sourceid+"  option:selected").appendTo("#"+destinationid);
  }

  //this will move all selected items from source list to destination list
  function move_list_items_all(sourceid, destinationid)
  {
    $("#"+sourceid+" option").appendTo("#"+destinationid);
  }
   
</script>

A bit of CSS

<style type="text/css">
select {
    width:200px;
    height:100px;
}
</style>

Here goes the HTML Code

<table cellpadding="5" cellspacing="5">

<tbody>

<tr>

    <td colspan="2">
        <select id="from_select_list" multiple="multiple" name="from_select_list">
        <option value="apple">Apple</option><option value="mango">Mango</option> <option value="bannana">Bannana</option> <option value="grapes">Grapes</option>
        </select>
    </td>
   
    <td colspan="2">
        <select id="to_select_list" multiple="multiple" name="to_select_list">
        <option value="winder">Winter</option> <option value="summer">Summer</option> <option value="rainy">Rainy</option> <option value="Spring">Spring</option>
        </select>
    </td>

</tr>

<tr>

    <td><input id="moveright" type="button" value="Move Right" onclick="move_list_items('from_select_list','to_select_list');" /></td>
   
    <td><input id="moverightall" type="button" value="Move Right All" onclick="move_list_items_all('from_select_list','to_select_list');" /></td>
   
    <td><input id="moveleft" type="button" value="Move Left" onclick="move_list_items('to_select_list','from_select_list');" /></td>
   
    <td><input id="moveleftall" type="button" value="Move Left All" onclick="move_list_items_all('to_select_list','from_select_list');" /></td>

</tr>

</tbody>

</table>
  1. Thank u 4 sharing it

  2. Key Yannte says:

    Thank you !

  3. Nice content for the newbees

  4. list box items!! for Visua basic.net?????

    • Basically, I am not a .NET guy, but you can simply use these JavaScript functions in your vb.net code. You create the list box and pass there ids to the function, they will take care of the things. Let me know if you still get any issue.

  5. thnx for the code…. nice…

  6. Hi there, thanks for the code.

    I have one question though, this works perfect only on form submit I am submitting the second form to save the data within. The form will only submit the items that are currently highlighted. If for example I click somewhere in the second box and only one item is high lighted, it will only submit this item.

    Anyone know of a work around this?
    Thanks

    • Hi Pierre,

      I am not sure if I get your question, what do you mean by the second form, can you explain or show a demo of what you are talking about so that we can look at that issue.

      Thanks

  7. was very use full, thanks man.

  8. Thank you Dharma.

  9. lot of thanks, very help full this code

  10. tester12 says:

    hi i did the exact above it transefers from one box to another, but when i send it on a from it doesnt post the info… do you know how i wud do this…

    thanks

  11. thanks!

  12. In order to pass all of the items in a select list they have to be selected. You can use this code to select all of the items before submitting:

    $(‘form’).submit(function() {
    $(‘#select2 option’).each(function(i) {
    $(this).attr(“selected”, “selected”);
    });
    });

  13. I want to insert the selected values from the 2nd listbox,for that i have to get the values from the 1st listbox to the 2nd listbox with id,how can i do that,please help me..

  14. i mean i want to insert into database

  15. Thank you !

  16. Java Jerry says:

    Nice …one ….BUT It allows duplicate entry in right side table….

  17. just ask how will it be connected and inserted to the databas tnx

  18. SARAVANAN says:

    thank gi….super…

  19. thanks sir

  20. Thank you!

  21. while moving all the data from first to second I get a null point exception

  22. after moving items did not come to original position,pls help me

Trackbacks/Pingbacks

  1. Moving list items from one select box to another | Senthilprabu - […] simple jQuery code for moving multiple items from one select box to another select […]

Leave a Reply