Not a Member Yet,
Click here to Register
How do you like the new design?

ID: 499
Viewed: 3296
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+

<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;


// 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

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

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

// ** Now delete the entries shown in the to listbox already

// ** 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


<title>Sample Listbox App !!!</title>


 <form Name="FormName">
<table border="0">
<select Name="lstBoxLeft" Multiple Style='Width:50px;height:100px'>
<select Name="lstBoxRight" Multiple Style='Width:50px;height:100px'>
<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()">

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 All Rights Reserved. Conditions