Snippet Library

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