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

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.

Category: jQuery
Tag: add, add all, appendTo, jQuery, listbox, operations, remove, remove all

Published by aackose

A Sitecore & SharePoint Consultant with over 11 years of extensive technical experience in UI/UX Designing, Requirements Analysis, Designing, Developing, Testing, Deployment, Infrastructure Setup for web/enterprise-based applications using Microsoft Technologies (SharePoint, Sitecore & .NET) across all phases of SDLC View all posts by aackose

précis June 3, 2015 at 1:21 PM

It’s great that you are getting thoughts from this piece of writing as well as from our argument made here.

Reply
並列 May 20, 2015 at 8:14 AM

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!

Reply
microprogram May 27, 2014 at 7:01 PM

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.

Reply
Adugna Worku January 24, 2011 at 12:54 PM

I hit this link and it is pretty helpfull

http://www.dotnetspark.com/kb/1683-add-remove-items-from-one-listbox-to-another.aspx

Reply
ranjit January 14, 2011 at 6:23 AM

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

>>
>
<
<<

Reply