

ID: 499
Viewed: 4027
Added: Dec 23, 2002
Version: 1.0



Snippet uploaded by: snippet
Written By: Unknown
Demo: Sorry, no demo



Thank you for your vote. Please wait...
It appears you already voted for this snippet
It appears your vote value was empty


I have seen this type of script requested a lot on the forums. Hope somebody can make use of it.
Browsers: IE5+
Browsers: IE5+
<!---Head--->
<script language="javascript" type="text/javascript">
<!--//
function cmdAddLeftBoxToRight_onclick()
{
AddRemoveButtons(document.FormName.elements("lstBoxLeft"), document.FormName.elements("lstBoxRight"));
}
//--------------------------------------------------
function cmdAddRightBoxToLeft_onclick() {
AddRemoveButtons(document.FormName.elements("lstBoxRight"), document.FormName.elements("lstBoxLeft"));
}
//----------------------------------------------------
function AddRemoveButtons(paramFromListbox, paramToListbox){
// declare varables and set the initial value of the boolean variable
var intCounter;
var intCounter2;
var blnInRightListAlready = false;
var arrComboValues = new Array();
// ** Check if an option/entry has been selected int the from listbox, if so carry out the following ...
if (paramFromListbox.selectedIndex>=0)
{
// ** Set up a loop to go through all of the options in the from listbox
for(intCounter=0;intCounter<paramFromListbox.options.length; intCounter++)
{
// ** For each of these options, check if it is selected (this loop accounts for a multi-select option)
if(paramFromListbox.options[intCounter].selected == true)
{
var oOption = document.createElement('OPTION');
oOption.text = paramFromListbox.options[intCounter].text;
oOption.value = paramFromListbox.options[intCounter].value;
// ** Set up a loop to go through all of the options in the to listbox
for(intCounter2=0; intCounter2<paramToListbox.options.length-1; intCounter2++)
{
// ** If any of the options in the to box, match one of the curently selected options in the from listbox.
if (paramToListbox.options[intCounter2].text == paramFromListbox.options[intCounter].text)
{
// Set the value of the boolean variable to indicate that a matching value was found,
// then break out of this if statement.
blnInRightListAlready = true;
break;
}
}
// If the entry in the from listbox matches one of those in the to listbox already, carry out the below
if (blnInRightListAlready == false)
{
// ** copy the selected <option> over from the from listbox into the to one
paramToListbox.add(oOption);
}
// Remove the from listbox entry regardless of whether or not it was added to the right, then
// Reset the counter as every entry or <option> removed makes the from listbox reload and therefore the
// remaining entries indexes decrease by 1.
paramFromListbox.options.remove(intCounter);
intCounter = intCounter-1;
}
}
// ** loop through all the left listbox entries and put the text and value entries into an array
for (intCounter=0; intCounter<paramToListbox.options.length;intCounter++)
{
arrComboValues[intCounter] = new Array()
arrComboValues[intCounter][0] = paramToListbox.options[intCounter].text;
arrComboValues[intCounter][1] = paramToListbox.options[intCounter].value;
}
// ** Sort the array
arrComboValues.sort()
// ** Now delete the entries shown in the to listbox already
paramToListbox.options.length=0;
// ** Finally, populate the to listbox again with the sorted array values
for (intCounter=0; intCounter<arrComboValues.length;intCounter++)
{
// ** Create the <option> element to put into the to listbox
// ** with the text and value of this option taken from the array entries.
var oOption = document.createElement('OPTION');
oOption.text = arrComboValues[intCounter][0];
oOption.value = arrComboValues[intCounter][1];
// ** add this <option> to the to listbox
paramToListbox.add(oOption);
}
}
}
//-->
</script>
<title>Sample Listbox App !!!</title>
<!---Body--->
<form Name="FormName">
<table border="0">
<tr>
<td>
<select Name="lstBoxLeft" Multiple Style='Width:50px;height:100px'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td>
<select Name="lstBoxRight" Multiple Style='Width:50px;height:100px'>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input type="Button" Name="cmdAddLeftBoxToRight" Value="Add" OnClick="javascript: cmdAddLeftBoxToRight_onclick()">
<input type="Button" Name="cmdAddRightBoxToLeft" value="Remove" OnClick="javascript: cmdAddRightBoxToLeft_onclick()">
</td>
</tr>
</table>
</form>
No Comments to show


Please completely fill out the form below if you want to review this snippet. All reviews are subject to validation.
Adding your comment. Please wait...
Thanks for adding your comment!. After further review it will be added.
There was a problem adding your comment. Please try again.
Please complete all the fields in the form before sending.