Post
Ask Question

Move Items From One List Box to Another List Box Using JQuery

The following is the output of my program.

select country
                                                                                 Image 1

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

add country
                                                                                 Image 2

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

select all country
                                                                                 Image 3

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

select country left side
                                                                                 Image 4

If you click on the ( << ) then:

select all country left side
                                                                                 Image 5

The following is my aspx where I wrote the jQuery for this:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title>Move Item From One List To Another List Using jQuery</title>  
  7.     <script src="jquery-1.7.1.js" type="text/javascript"></script>  
  8.     <script type="text/javascript">  
  9.         $(document).ready(  
  10.             function() {  
  11.                 $('#btnAdd').click(  
  12.                     function(e) {  
  13.                         $('#list1 > option:selected').appendTo('#list2');  
  14.                         e.preventDefault();  
  15.                     });  
  16.   
  17.                 $('#btnAddAll').click(  
  18.                 function(e) {  
  19.                     $('#list1 > option').appendTo('#list2');  
  20.                     e.preventDefault();  
  21.                 });  
  22.   
  23.                 $('#btnRemove').click(  
  24.                 function(e) {  
  25.                     $('#list2 > option:selected').appendTo('#list1');  
  26.                     e.preventDefault();  
  27.                 });  
  28.   
  29.                 $('#btnRemoveAll').click(  
  30.                 function(e) {  
  31.                     $('#list2 > option').appendTo('#list1');  
  32.                     e.preventDefault();  
  33.                 });  
  34.   
  35.             });  
  36.     </script>  
  37.   
  38. </head>  
  39. <body11  
  40.     <form id="form1" runat="server">  
  41.     <table cellpadding="4" cellspacing="4" width="90%" align="center" style="border: solid 2px gray;  
  42.         background-color: #ADD8E6;">  
  43.         <tr>  
  44.             <td height="10px">  
  45.             </td>  
  46.         </tr>  
  47.         <tr>  
  48.             <td align="center">  
  49.                 <asp:ListBox ID="list1" runat="server" Width="250px" Height="100px">  
  50.                     <asp:ListItem Value="India">India</asp:ListItem>  
  51.                     <asp:ListItem Value="Australia">Australia</asp:ListItem>  
  52.                     <asp:ListItem Value="USA">USA</asp:ListItem>  
  53.                     <asp:ListItem Value="Japan">Japan</asp:ListItem>  
  54.                     <asp:ListItem Value="Brazil">Brazil</asp:ListItem>  
  55.                 </asp:ListBox>  
  56.             </td>  
  57.             <td align="center">  
  58.                 <input type="button" id="btnAdd" value=">" style="width: 50px;" /><br />  
  59.                 <input type="button" id="btnAddAll" value=">>" style="width: 50px;" /><br />  
  60.                 <input type="button" id="btnRemove" value="<" style="width: 50px;" /><br />  
  61.                 <input type="button" id="btnRemoveAll" value="<<" style="width: 50px;" />  
  62.             </td>  
  63.             <td align="center">  
  64.                 <asp:ListBox ID="list2" runat="server" Width="250px" Height="100px"></asp:ListBox>  
  65.             </td>  
  66.         </tr>  
  67.         <tr>  
  68.             <td height="10px">  
  69.             </td>  
  70.         </tr>  
  71.     </table>  
  72.     </form>  
  73. </body>  
  74. </html>  


Similar Articles