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. #1 by NOOR MOHAMMAD BEIGH on January 15, 2017 - 5:17 pm

    works fine

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s