Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

Moving Items from One ListBox to other ListBox using JQuery

Article:
Viewed:  3682 
Posted On:  17/03/2014 11:10:34 
How we can move items from one list to another list box using jQuery in asp.net ? 

In this article I am going to explain how we can move item from one list box to another list box using jQuery.

Below is the output of my program.

1.png

Image 1.

After selecting any item from left side list box click on ( >) button.

2.png

Image 2.

If you click on ( >> ) button then all item in left side list box will move to right side list box.

3.png

Image 3.

After selecting any item in right side list box if you click on ( < ) then.

4.png

Image 4.

IF you click on ( << ) then.

5.png

Image 5.

Below is my aspx where I wrote jquery for this:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Move Item From One List To Another List Using jQuery</title>
    <script src="jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(
            function() {
                $('#btnAdd').click(
                    function(e) {
                        $('#list1 > option:selected').appendTo('#list2');
                        e.preventDefault();
                    });
 
                $('#btnAddAll').click(
                function(e) {
                    $('#list1 > option').appendTo('#list2');
                    e.preventDefault();
                });
 
                $('#btnRemove').click(
                function(e) {
                    $('#list2 > option:selected').appendTo('#list1');
                    e.preventDefault();
                });
 
                $('#btnRemoveAll').click(
                function(e) {
                    $('#list2 > option').appendTo('#list1');
                    e.preventDefault();
                });
 
            });
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
    <table cellpadding="4" cellspacing="4" width="90%" align="center" style="border: solid 2px gray;
        background-color: #ADD8E6;">
        <tr>
            <td height="10px">
            </td>
        </tr>
        <tr>
            <td align="center">
                <asp:ListBox ID="list1" runat="server" Width="250px" Height="100px">
                    <asp:ListItem Value="India">India</asp:ListItem>
                    <asp:ListItem Value="Australia">Australia</asp:ListItem>
                    <asp:ListItem Value="USA">USA</asp:ListItem>
                    <asp:ListItem Value="Japan">Japan</asp:ListItem>
                    <asp:ListItem Value="Brazil">Brazil</asp:ListItem>
                </asp:ListBox>
            </td>
            <td align="center">
                <input type="button" id="btnAdd" value=">" style="width: 50px;" /><br />
                <input type="button" id="btnAddAll" value=">>" style="width: 50px;" /><br />
                <input type="button" id="btnRemove" value="<" style="width: 50px;" /><br />
                <input type="button" id="btnRemoveAll" value="<<" style="width: 50px;" />
            </td>
            <td align="center">
                <asp:ListBox ID="list2" runat="server" Width="250px" Height="100px"></asp:ListBox>
            </td>
        </tr>
        <tr>
            <td height="10px">
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us