CODEDIGEST
Home » CodeDigest
Search
 

Technologies
 

How to Add, Remove ListItems from one ListBox to Another Using JQuery?
Submitted By Satheesh Babu B
On 2/19/2009 7:25:15 AM
Tags: asp.net,CodeDigest,JQuery  

How to Add, Remove ListItems from one ListBox to Another in JQuery?

 

One of my previous code snippet, Add,Add All, Remove, Remove All functionalities from one ASP.Net ListBox to another in Javascript  discussed about moving ListItems from one to another using JavaScript.  The introduction of JQuery made the client side DOM manipulation easier and simple.

 

The following little code snippet will help us implementing the same feature using JQuery.

 

<head runat="server">

    <title></title>

    <script src="_scripts/jquery-1.2.6.js" type="text/javascript"></script>

    <script language="javascript">

        $(document).ready(function() {

            $("#btnAdd").click(function() {

                $("#ListBox1 > option[@selected]").appendTo("#ListBox2");

            });

            $("#btnAddAll").click(function() {

                $("#ListBox1 > option").appendTo("#ListBox2");

            });

            $("#btnRemove").click(function() {

                $("#ListBox2 > option[@selected]").appendTo("#ListBox1");

            });

            $("#btnRemoveAll").click(function() {

                $("#ListBox2 > option").appendTo("#ListBox1");

            });

        });             

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple">

            <asp:ListItem>1</asp:ListItem>

            <asp:ListItem>2</asp:ListItem>

            <asp:ListItem>3</asp:ListItem>

        </asp:ListBox>

        <input id="btnAdd" type="button" value="Add" />

        <input id="btnAddAll" type="button" value="Add All" />

        <input id="btnRemove" type="button" value="Remove" />

        <input id="btnRemoveAll"type="button" value="Remove All" />

        <asp:ListBox ID="ListBox2" runat="server" SelectionMode="Multiple"></asp:ListBox> 

    </div>

    </form>

</body>

</html>

Do you have a working code that can be used by anyone? Submit it here. It may help someone in the community!!

Recent Codes
  • View All Codes..