Move item Across the ListBox

In my previous blog, I have explained select and deselect item from listbox and remove selected item from ListBox using JavaScript. Now I am going to explain how to move items across the ListBox such as:

data

After selecting the item from listbox 1 like { Licknow,Goralhpur,Deoria}, click on Move right. After this you can see that the then selected data should be shown in listbox2 like.

Move right

Now select some item from listbox2 like {C++,C#,ANSI C}

listbox2

And now click on Move Left button, data will move to listbox1

Move Left

For this write following code inside body tag.

  1. <form id="form1" runat="server">  
  2.            <div>  
  3.   
  4.          
  5.      <asp:ListBox ID="lstbox1" runat="server" SelectionMode="Multiple" style="height:200px;width:100px;">  
  6.         <asp:ListItem Value="1" Text="Delhi" ></asp:ListItem>  
  7.         <asp:ListItem Value="2" Text="Mumbai" ></asp:ListItem>  
  8.         <asp:ListItem Value="3" Text="Banglore" ></asp:ListItem>  
  9.         <asp:ListItem Value="4" Text="Kolkatta" ></asp:ListItem>  
  10.         <asp:ListItem Value="5" Text="Chennai" ></asp:ListItem>  
  11.         <asp:ListItem Value="6" Text="Lucknow" ></asp:ListItem>  
  12.         <asp:ListItem Value="7" Text="Gorakhpur" ></asp:ListItem>  
  13.         <asp:ListItem Value="8" Text="Deoria" ></asp:ListItem>  
  14.     </asp:ListBox>  
  15.          
  16.         <asp:Button ID="btn1" runat="server" Text="Move right" OnClientClick="moverightleft('lstbox1','lstbox2');return false;" />  
  17.         <asp:Button ID="btn2" runat="server" Text="Move Left" OnClientClick="moverightleft('lstbox2','lstbox1');return false;" />  
  18.         <asp:ListBox ID="lstbox2" runat="server" SelectionMode="Multiple" style="height:200px;width:100px;">  
  19.         <asp:ListItem Value="1" Text="ASP.net" ></asp:ListItem>  
  20.         <asp:ListItem Value="2" Text="C++" ></asp:ListItem>  
  21.         <asp:ListItem Value="3" Text="C#" ></asp:ListItem>  
  22.         <asp:ListItem Value="4" Text="ANSI C" ></asp:ListItem>  
  23.         <asp:ListItem Value="5" Text="LINQ" ></asp:ListItem>  
  24.         <asp:ListItem Value="6" Text="SQL" ></asp:ListItem>  
  25.         <asp:ListItem Value="7" Text="ORacle" ></asp:ListItem>  
  26.         <asp:ListItem Value="8" Text="D" ></asp:ListItem>  
  27.         </asp:ListBox>  
  28.            
  29.           
  30.     </div>  
  31.     </form> 

Here a have declared two listbox lstbox1 and lstbox2 and two buttons one for Move Right and one for Move Left.

And write following code for Javascript inside Head tag:

  1. <script >  
  2.       function moverightleft(list1, list2) {  
  3.           var lst1 = document.getElementById(list1);  
  4.           var lst2 = document.getElementById(list2);  
  5.   
  6.           for (var i = 0; i < lst1.options.length; i++) {  
  7.   
  8.               if (lst1.options[i].selected == true) {  
  9.                   var option = lst1.options[i];  
  10.   
  11.                   var newOption = document.createElement("option");  
  12.                   newOption.value = option.value;  
  13.                   newOption.text = option.text;  
  14.                   newOption.selected = true;  
  15.                   try  
  16.                   {  
  17.                       lst2.add(newOption, null);   
  18.                       lst1.remove(i, null);  
  19.                   }  
  20.                   catch(error)  
  21.                   {  
  22.                       lst2.add(newOption);  
  23.                       lst1.remove(i);  
  24.                   }  
  25.   
  26.                   i--;  
  27.               }  
  28.           }  
  29.       }  
  30.       </script> 

Here a function called move right left is used for both purposes like move left and move right.

Next Recommended Reading How to Remove Selected Item From ListBox