Moving Items from One Multi Select List To Another using jQuery

Posted by: Suprotim Agarwal , on 1/3/2015, in Category jQuery and ASP.NET
Views: 60524
Abstract: This article demonstrates how to use jQuery to move items from one multi select list to another.

Our page has two MultiSelect List elements with some items in them. Our requirement is to be able to move items between the two multiselect boxes. We should be even able to move multiple items or all items at once.

 

Create a new file called ‘MoveMultiSelectListItems.html’ . Use the following HTML:

<body>
    <h2>Move Items From One List to Another</h2>
    <select id="sbOne" multiple="multiple">
        <option value="1">Alpha</option>
        <option value="2">Beta</option>
        <option value="3">Gamma</option>
        <option value="4">Delta</option>
        <option value="5">Epsilon</option>
    </select>

    <select id="sbTwo" multiple="multiple">
        <option value="6">Zeta</option>
        <option value="7">Eta</option>
    </select>

    <br />

    <input type="button" id="left" value="<" />
    <input type="button" id="right" value=">" />
    <input type="button" id="leftall" value="<<" />
    <input type="button" id="rightall" value=">>" />
</body>

We have two select elements and a couple of buttons to move items between the lists. The select element is also marked with multiple=”multiple” to make it appear as selectable items.

Here’s how the UI will look if you browse the page. Our task is to move items in between these lists.

s5-selectmoveitems

Although this may initially look like a complex problem to achieve, the solution is relatively simple, thanks to the useful jQuery methods and selectors. First download the latest jQuery file in a folder called scripts and add a reference to the jQuery file in your HTML page:

<script src="../scripts/jquery-1.11.1.min.js"></script>

Let’s look at the code now:

$(function () { function moveItems(origin, dest) {
    $(origin).find(':selected').appendTo(dest);
}

function moveAllItems(origin, dest) {
    $(origin).children().appendTo(dest);
}

$('#left').click(function () {
    moveItems('#sbTwo', '#sbOne');
});

$('#right').on('click', function () {
    moveItems('#sbOne', '#sbTwo');
});

$('#leftall').on('click', function () {
    moveAllItems('#sbTwo', '#sbOne');
});

$('#rightall').on('click', function () {
    moveAllItems('#sbOne', '#sbTwo');
});
});

We’ve defined a moveItems() function that accepts two selector strings: origin select element and a destination select element. The selector string is converted into a jQuery object using $(origin) so that we can call some jQuery methods and selectors on it. The currently selected items are grabbed using the find() method with the :selected filter. Then the selected items are moved to the destination list with appendTo(). The appendTo() method accepts a target element, which in our case is a destination select box and appends the selected element to the end of the target element.

The moveAllItems() function works in a similar manner, except that in this case, instead of using the :selected filter to access the currently selected items, we are using children() to grab all the child elements in the origin list and appending to the bottom of the destination list.

And once this functionality has been defined, we just have to call the appropriate function from the respective click handler.

$('#left').click(function () {
    moveItems('#sbTwo', '#sbOne');
});

$('#right').on('click', function () {
    moveItems('#sbOne', '#sbTwo');
});

$('#leftall').on('click', function () {
    moveAllItems('#sbTwo', '#sbOne');
});

$('#rightall').on('click', function () {
    moveAllItems('#sbOne', '#sbTwo');
});

Save and run the example and you can transfer items between the two lists. For example, we have selected Gamma, Delta and Epsilon in the first list and used the ‘>’ click to move it to the second list. Here’s the output.

s5-selectmoveitems-1

Similarly use the ‘<<’ button to move all items on the second list to the first one. Here’s the output

s5-selectmoveitems-2

Live Demo: http://www.jquerycookbook.com/demos/S4-DropDownULLists/43-MoveMultiSelectListItems.html

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for ten consecutive times. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn



Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Jay on Sunday, April 5, 2015 9:55 PM
Hi  Suprotim ,

Tried to use the above code and it did not function. More specifically, none of the arrow buttons in the UI worked - which is pretty much all the functionality. Howevever, I ran your demo and it worked, so I looked at the source code to your working demo (ctrl-u in chrome browser) and found the problem. The jQuery section of code above, just under where it reads "Let’s look at the code now:" is missing the function wrapper lines:

$(function () {   // at the beginning of the javascript block, and....
        });        // at the end of that same block.

and of course all of that is wrapped inside of:
    <script type="text/javascript">
        .
        .
        .
        .
    </script>

in turn wrapped inside the <header></header>. Please edit with corrections. Thanks !
Comment posted by Suprotim Agarwal on Tuesday, April 7, 2015 7:03 AM
@Jay: I added it to the code. By the way, you will find plenty of articles not mentioning the $(function () { }) block explicitly. This is because it is assumed that since you are working on jQuery, you already know that block is required to bootstrap jQuery. It is to specify a function to execute when the DOM is fully loaded and is a shortcut to the ready() function.

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook