• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 531
  • Last Modified:

To add and remove data in between 2 listboxes in javascript

I wanted to add or remove data inbetween listboxes by using javascript.
i got code from this following link..
but when ever i click add button nothing is happenening....
can u pls tell wht is the meaning of this 2 lines of code
 var varFromBox = document.all(lstbxFrom);
 var varToBox = document.all(lstbxTo);  

pls help me ..thanks in advance.
1 Solution
David H.H.LeeCommented:
Hi neha_john,
I've completed the test code there, please see the code snippet.
>>can u pls tell wht is the meaning of this 2 lines of code
 var varFromBox = document.all(lstbxFrom); //<---- this is refer the listbox's source control (from parameters)
 var varToBox = document.all(lstbxTo);   //<---- this is refer the listbox's desstination control
 (from parameters)
function fnMoveItems(lstbxFrom,lstbxTo)
 var varFromBox = document.all(lstbxFrom);
 var varToBox = document.all(lstbxTo); 
 if ((varFromBox != null) && (varToBox != null)) 
  if(varFromBox.length < 1) 
   alert('There are no items in the source ListBox');
   return false;
  if(varFromBox.options.selectedIndex == -1) // when no Item is selected the index will be -1
   alert('Please select an Item to move');
   return false;
  while ( varFromBox.options.selectedIndex >= 0 ) 
   var newOption = new Option(); // Create a new instance of ListItem 
   newOption.text = varFromBox.options[varFromBox.options.selectedIndex].text; 
   newOption.value = varFromBox.options[varFromBox.options.selectedIndex].value; 
   varToBox.options[varToBox.length] = newOption; //Append the item in Target Listbox
   varFromBox.remove(varFromBox.options.selectedIndex); //Remove the item from Source Listbox 
 return false; 
code for calling the javascript function:
There are 2 methods of calling the javascript code, they are as under.
1.  Add this code in the pageload
btnMoveRight.Attributes.Add("onclick","return fnMoveItems('ListBox1','ListBox2')");
btnMoveLeft.Attributes.Add("onclick","return fnMoveItems('ListBox2','ListBox1')");
2.  Add this code in the HTML
<input type = "button" id = "btnMoveRight" value="  Right  " onclick = "fnMoveItems('ListBox1','ListBox2')">
<input type = "button" id = "btnMoveLeft" value="  Left  " onclick = "fnMoveItems('ListBox2','ListBox1')"><br><br>
<select id="ListBox1" multiple style="width:100px">
<option value=1>1</options>
<option value=2>2</options>
<option value=3>3</options>
<select id="ListBox2" multiple style="width:100px">
<option value=1>5</options>
<option value=2>6</options>
<option value=3>7</options>

Open in new window

That means you are creating a object of the control in the page . "VAR" means variable type and "document.all" from all the control in the document , create the object of the control with name "lstbxFrom" and "lstbxTo". From there on you can access the two listbox using the object varFromBox ,varToBox
neha_johnAuthor Commented:
thanks a lot

Featured Post

Granular recovery for Microsoft Exchange

With Veeam Explorer for Microsoft Exchange you can choose the Exchange Servers and restore points you’re interested in, and Veeam Explorer will present the contents of those mailbox stores for browsing, searching and exporting.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now