Selecting one select list box item selects all?

JavaScript
1

I currently have two html select list boxes side by side on a form, two buttons in between the boxes to move items from list box to the other, and a javascript function to control the movement of the items from one box to the other. Here is the javascript:



function MoveSelected(from, to) {
		var lstFrom = $(from);
		var lstTo = $(to);

		for (var i = 0; i<lstFrom.length;i++) {
			if ( lstFrom[i].selected ) {
				var elOptNew = document.createElement('option');
		    	elOptNew.text = lstFrom[i].text;
    			elOptNew.value = lstFrom[i].value;
			    try {
					lstTo.add(elOptNew, null); // standards compliant; doesn't work in IE
			    } catch(ex) {
					lstTo.add(elOptNew); // IE only
			    }
			}
		}
		for (var i = lstFrom.length-1; i>=0;i--) {
			if ( lstFrom[i].selected ) {
				lstFrom.options[i] = null;
			}										
		}					
	}

Here are the two html form select list boxes (lstAvailProd is the starting list box that lists the initial data and lstSelectProd is the destination list box):



<td width="10%" valign="center">
	<a href="javascript: MoveSelected('lstAvailProd','lstSelectProd');"><IMG SRC="buttons/right_arrow.gif" style="padding-bottom: 2px;" /></a><br /><br />
	<a href="javascript: MoveSelected('lstSelectProd','lstAvailProd');"><IMG SRC="buttons/left_arrow.gif" /></a>
</td>

I was wondering if anyone could tell me how I could modify my code to allow for the selection of all the data in the starting list box by only selecting and moving the first item in the list to the destination list box? The first item is called “All Products”, so instead of actually selecting every product in the starting list and moving them to the destination list, I would like the code to see that if the “All Products” list item is moved to the destination list, move all the other list items in the destination list back to the starting list. Here’s an example of what the code for each list box looks like:

Starting List Box:



<select name="lstAvailProd" id="lstAvailProd" multiple="true" size="8" style="width: 250px;">
	<option value="-1">{All Products}</option>
	<option value="1">Product 1</option>
	<option value="2">Product 2</option>
	<option value="3">Product 3</option>
	<option value="4">Product 4</option>
	<option value="5">Product 5</option>
</select>

Destination List Box:



<select name="lstSelectProd" id="lstSelectProd" multiple="true" size="8" style="width: 250px;">
</select>

Any help would be appreciated, thanks!!