Moving Items from One ListBox to other ListBox using JQuery

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;

            });

});

You must Login to comment.