Click here to Skip to main content
15,895,812 members
Articles / Script
Article

Moving Items from One ListBox to other ListBox using JQuery

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
11 Oct 2013CPOL 20.5K   3   3
Following script will move the selected items from one list box item to another list box item.Markup: <asp:ListBox ID="lstBox1" runat="server"

This articles was originally at wiki.asp.net but has now been given a new home on CodeProject. Editing rights for this article has been set at Bronze or above, so please go in and edit and update this article to keep it fresh and relevant.

Following script will move the selected items from one list box item to another list box item.

Markup:

<asp:ListBox ID="lstBox1" runat="server" SelectionMode="Multiple">

            <asp:ListItem Text="A" Value="1"></asp:ListItem>

            <asp:ListItem Text="B" Value="2"></asp:ListItem>

            <asp:ListItem Text="C" Value="3"></asp:ListItem>

            <asp:ListItem Text="D" Value="4"></asp:ListItem>

</asp:ListBox>

<asp:Button ID="btnMoveRight" runat="server" Text=">>" />

<asp:Button ID="btnMoveLeft" runat="server" Text="<<" />

<asp:ListBox ID="lstBox2" runat="server" SelectionMode="Multiple">

            <asp:ListItem Text="E" Value="5"></asp:ListItem>

            <asp:ListItem Text="F" Value="6"></asp:ListItem>

            <asp:ListItem Text="G" Value="7"></asp:ListItem>

            <asp:ListItem Text="H" Value="8"></asp:ListItem>

</asp:ListBox>

JQuery script:

$(document).ready(function() {

            $('#<%=btnMoveRight.ClientID %>').click(function() {

                var selectedOptions = $('#<%=lstBox1.ClientID %> option:selected');

                if (selectedOptions.length == 0) {

                    alert("Please select option to move");

                    return false;

                }

                $('#<%=lstBox2.ClientID %>').append($(selectedOptions).clone());

                $(selectedOptions).remove();

                return false;

            });

            $('#<%=btnMoveLeft.ClientID %>').click(function() {

                var selectedOptions = $('#<%=lstBox2.ClientID %> option:selected');

                if (selectedOptions.length == 0) {

                    alert("Please select option to move");

                    return false;

                }

                $('#<%=lstBox1.ClientID %>').append($(selectedOptions).clone());

                $(selectedOptions).remove();

                return false;

            });

});

 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
The ASP.NET Wiki was started by Scott Hanselman in February of 2008. The idea is that folks spend a lot of time trolling the blogs, googlinglive-searching for answers to common "How To" questions. There's piles of fantastic community-created and MSFT-created content out there, but if it's not found by a search engine and the right combination of keywords, it's often lost.

The ASP.NET Wiki articles moved to CodeProject in October 2013 and will live on, loved, protected and updated by the community.
This is a Collaborative Group

754 members

Comments and Discussions

 
QuestionThanks! Adjusted your code to work with multiple pairs of lists Pin
Member 235736229-Aug-14 8:04
Member 235736229-Aug-14 8:04 
Questionsame code in different manner Pin
dotnetpickles10-Feb-14 16:54
dotnetpickles10-Feb-14 16:54 
QuestionPlease provide solution Pin
Member 961522216-Jan-14 19:00
Member 961522216-Jan-14 19:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.