why does .remove() take away 2 item

Geates · Nov 13, 2012

While troubleshooting thread216-1697987, I ran into something I do not understand. Can anyone explain to me why the .remove() is not necessary? If it's uncommented, the function removes 2 items from the source select

Code:

<!DOCTYPE html>
 
<html>
	<HEAD>
		<title>Mulitiple swap on click</title>
		<SCRIPT LANGUAGE="JavaScript">
			function moveRight(index) {	
				option = document.choiceForm.available.options[index];			
				option.selected = false;
				document.choiceForm.choiceBox.add(option);
				//document.choiceForm.available.remove(index);
			}
			
			function moveLeft(index){	
				option = document.choiceForm.choiceBox.options[index];			
				option.selected = false;
				document.choiceForm.available.add(option);
				//document.choiceForm.choiceBox.remove(index);
			}
			
			function saveMe() {
				var strValues = "";
				for (i = 0; i < document.choiceForm.choiceBox.length; i++) {				
					strValues = strValues + ',' + document.choiceForm.choiceBox.options[i].value;
				}
			
				strValues = strValues.substr(1);
				if (strValues.length == 0) {
					alert("You have made no selection(s)");
				}
				else {
					alert("Here are the values you've selected:\r\n" + strValues);
					choiceForm.valuesForInsert.value = strValues;
					choiceForm.submit();
				}
			}
		</script>
	</HEAD>

	<BODY>
		<form name="choiceForm" action="#" method="post">
			<input type="hidden" name="selectedValues" value="0">
			<input type="hidden" name="valuesForInsert" value="0">
	
			<table border="0">
				<tr>
					<td valign="top" width=175>Available Countries:<br>
						<select name="available" size=10 onclick="moveRight(this.selectedIndex);">
							<option value="1">Australia
							<option value="2">New Zealand
							<option value="3">USA
							<option value="4">Canada
							<option value="5">England
							<option value="6">Switzerland
							<option value="7">Russia
							<option value="8">France
							<option value="9">Italy
							<option value="10">Samoa
						</select>
					</td>
					<td valign="top">
						Your Choices:<br>
						<select multiple name="choiceBox" style="width:150;" size="10" onclick="moveLeft(this.selectedIndex);"></select>
					</td>
				</tr>
				<tr>
					<td colspan=2 height=10><input type="button" value="Get Selected Values" onclick="saveMe();"></td>
				</tr>
			</table>
		</form>
	</body>
</html>

-Geates

http://raqxtr.sstar.com/caspdoc/html/chapter_5__developer_s_reference.htm

vacunita · Nov 13, 2012

Of course it does.

When you physically add the option object to the other lists it is removed automatically from the source list, as the same object can't exist in two places at once. Its either inside list1 or inside list2.

Basically what add does is it changed the objects parent to list2, so it stops being a child of list1. Hence disappearing from list1.

Adding the remove() function then removes the next option which now has shifted to take the place of the moved option and so has its selectedIndex.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

Geates · Nov 13, 2012

Thank you, Phil. I thought that may have been the case but didn't want to assume; I do enough of that already.

-Geates

http://raqxtr.sstar.com/caspdoc/html/chapter_5__developer_s_reference.htm

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

why does .remove() take away 2 item

Geates

Programmer

vacunita

Programmer

Geates

Programmer

Similar threads

Part and Inventory Search

Sponsor