Introduction
This Article is usefull to move the list items between 2 listbox or combo or dropdown, it will also give an alert message if no items of the listbox are selected.
Background
This code can be used in any web applications, in the javascript part.
Using the code
Assumptions:
The name of Buttons are assumed to be btnMoveRight and btnMoveLeft
The name of the ListBox are assumed to be ListBox1 and ListBox2
Code for the javascript function:
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)
{
alert('Please select an Item to move');
return false;
}
while ( varFromBox.options.selectedIndex >= 0 )
{
var newOption = new Option();
newOption.text = varFromBox.options[varFromBox.options.selectedIndex].text;
newOption.value = varFromBox.options[varFromBox.options.selectedIndex].value;
varToBox.options[varToBox.length] = newOption;
varFromBox.remove(varFromBox.options.selectedIndex);
}
}
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" onclick = "fnMoveItems('ListBox1','ListBox2')">
<input type = "button" id = "btnMoveLeft" onclick = "fnMoveItems('ListBox2','ListBox1'">
Points of Interest
Let me know if you have any queries.
History
New Article on AJAX to be added shortly. :-)