Not a Member Yet,
Click here to Register
How do you like the new design?
It's cool, great job
[tally: 70%] 70%
It's okay
[tally: 20%] 20%
Its OK but I liked the old layout better
[tally: 0%] 0%
Please bring the old one back
[tally: 10%] 10%

votes: 10

ID: 499
Viewed: 3295
Added: Dec 23, 2002
Version: 1.0
Snippet uploaded by: snippet
Written By: Unknown
Demo: Sorry, no demo



User Rated at: 0 Stars
Rate This:

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+

<!---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.


Replying to a Comment...


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.

© 2002 - 2017 snippetlibrary.com All Rights Reserved. Conditions