Thursday, May 17, 2012

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;
            });
});

No comments:

Post a Comment