DotNetCurry Logo

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: 40545
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

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+
Further Reading - Articles You May Like!
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 a new one recently at The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for nine times in a row now. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that represents premium web sites and digital publications comprising of Professional web, windows, mobile and cloud developers, technical managers, and architects.

Get in touch with him on Twitter @suprotimagarwal, LinkedIn or befriend him on Facebook



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.