jQuery: Add (all), Remove (All) – operations between two Listboxes


Consider the scenario below:

In case of operations between two list boxes like add, add all, remove, remove all; jQuery is quite amazing with it. With the use of appendTo method, you just need one line for each of the four operations. Checkout the code below:

$(document).ready(function(){
$(“#btnAdd”).click(function() {
$(“select[id$=’lstAllAgents’] > option:selected”).appendTo(“select[id$=’lstGroupMembers’]”);
});
$(“li#btnAddAll”).click(function() {
$(“select[id$=’lstAllAgents’] > option”).appendTo(“select[id$=’lstGroupMembers’]”);
});
$(“li#btnRemove”).click(function() {
$(“select[id$=’lstGroupMembers’] > option:selected”).appendTo(“select[id$=’lstAllAgents’]”);
});
$(“li#btnRemoveAll”).click(function() {
$(“select[id$=’lstGroupMembers’] > option”).appendTo(“select[id$=’lstAllAgents’]”);
});
});

Note: btnAdd,btnAddAll,btnRemove,btnRemoveAll are the button id’s while lstAllAgents & lstGroupMembers are the id’s of the listboxes.

5 thoughts on “jQuery: Add (all), Remove (All) – operations between two Listboxes

  1. Thanks for your marvelous posting! I genuinely enjoyed reading it, you will be a great author.I will always bookmark your blog and
    definitely will come back someday. I want to encourage continue your great
    work, have a nice morning!

  2. With havin so much content and articles do you ever run into any
    issues of plagorism or copyright infringement?
    My blog has a lot of completely unique content I’ve either created myself or
    outsourced but it appears a lot of it is popping it up all
    over the web without my agreement. Do you know any ways to help stop content from being stolen?
    I’d really appreciate it.

  3. I tried your code ! some how i couldn’t able to copy it with correct syntax !

    jQuery(“#ADD”).click(function() {
    jQuery(“select[Select1jQuery=’drop1′] > option:selected”).appendTo(“select[Select2jQuery=’drop2′]”);
    });

    my html code :

    item 1
    item 2
    item 3
    item 4
    item 5

    >>
    >
    <
    <<

Feel free to leave a reply here...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s