Archive for category Listbox

How to move items between to two Listboxes in Asp.Net

Introduction

In this article I am going to explain how to move items between two listboxes on button click. In other words move items from Listbox on left to Listbox on right side and vice versa.

Description:

We can achieve this requirement in two ways either by serverside(C#) or by client side (Javascript or Jquery). Here I am going to use Jquery codes to move items between Listbox controls.

Prerequisites:

You need to ensure that you have added the necessary Jquery references in your page prior to using the below code. You can either use the Jquery files available online or  If you don’t want to use the Online available cdn file then you can manually add the jquery files to your solution. I have explained the steps here in detail.

Complete Code:

Here is complete code which moves the items between two listboxes in Asp.Net using Jquery.

<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //Attach click event of button
            $("#btnRight").click(function (e) {
                //Pass the value from Listbox1 to Listbox2
                $("#Listbox1 > option:selected").each(function () {
                    $(this).remove().appendTo("#Listbox2");
                });
                e.preventDefault();
            });
            //Attach click event of button
            $("#btnleft").click(function (e) {
                //Pass the value from Listbox2 to Listbox1
                $("#Listbox2 > option:selected").each(function () {
                    $(this).remove().appendTo("#Listbox1");
                });
                e.preventDefault();
            });
        });
    </script>
</head>
<body>
    <form runat="server">
        <asp:ListBox ID="Listbox1" runat="server" SelectionMode="Multiple" Width="80">
            <asp:ListItem Text="Item1" Value="item1" />
            <asp:ListItem Text="Item2" Value="item2" />
            <asp:ListItem Text="Item3" Value="item3" />
            <asp:ListItem Text="Item4" Value="item4" />
            <asp:ListItem Text="Item5" Value="item5" />
            <asp:ListItem Text="Item6" Value="item6" />
        </asp:ListBox>
        <asp:Button ID="btnRight" runat="server" Text="Move to Right" />
        <asp:Button ID="btnleft" runat="server" Text="Move to Left" />
        <asp:ListBox ID="Listbox2" runat="server" SelectionMode="Multiple" Width="80"></asp:ListBox>
    </form>
</body>
</html>

Demo

Advertisements

, , , ,

1 Comment