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" %>
  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. });
  17. $('#btnAddAll').click(
  18. function(e) {
  19. $('#list1 > option').appendTo('#list2');
  20. e.preventDefault();
  21. });
  23. $('#btnRemove').click(
  24. function(e) {
  25. $('#list2 > option:selected').appendTo('#list1');
  26. e.preventDefault();
  27. });
  29. $('#btnRemoveAll').click(
  30. function(e) {
  31. $('#list2 > option').appendTo('#list1');
  32. e.preventDefault();
  33. });
  35. });
  36. </script>
  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>