Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Moving Items from One ListBox to other ListBox using JQuery

0.00/5 (No votes)
3 Oct 2011 1  
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 has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here