Changing a variable with a dropdown onChange function

**Submerged** · 05-29-2006, 10:42 PM

Okay, this is a bit of a complicated situation, so hang with me please .

On my script, I have 4 drop down boxes, called "choice1","choice2","choice3","choice4". Then I also have a hidden value called "choice".

What I need is that whenver someone picks a value out of any of the 4 dropdowns, it does 2 things:

1. Sets all 3 of the other dropdown boxes back to their top (original) value.
2. Sets the value of choice (hidden) to that of the selected option.

This is a bit beyond my knowledge, I don't use javascript too much. Any help is VERY appreciated

Thanks,
Submerged

**funkdaddu** · 01:47 PM

This is possible, but when your form is sent the value for the dropdown is going to have the same value as the hidden input, so why do you need the hidden box?

I any case, this should do what you want:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<script type="text/javascript"><!--
function setAndReset(box) {
	myOptions = new Array(document.FormName.choice1, document.FormName.choice2, document.FormName.choice3, document.FormName.choice4);
	document.FormName.hiddenInput.value = box.value;
	for (i=0; i<myOptions.length; i++) {
		if (myOptions[i].name != box.name) {
			myOptions[i].selectedIndex = 0;
		}
	}
}
//-->
</script>
	</head>

	<body bgcolor="#ffffff">
		<form id="FormName" action="" method="get" name="FormName">
			<select name="choice1" size="1" onchange="setAndReset(this);">
				<option value="one">first</option>
				<option value="two">second</option>
				<option value="three">third</option>
			</select> <select name="choice2" size="1" onchange="setAndReset(this);">
				<option value="one">first</option>
				<option value="two">second</option>
				<option value="three">third</option>
			</select> <select name="choice3" size="1" onchange="setAndReset(this);">
				<option value="one">first</option>
				<option value="two">second</option>
				<option value="three">third</option>
			</select> <select name="choice4" size="1" onchange="setAndReset(this);">
				<option value="one">first</option>
				<option value="two">second</option>
				<option value="three">third</option>
			</select> <input type="hidden" name="hiddenInput" value=""><input type="submit" name="submitButtonName">
		</form>
	</body>

</html>

**Submerged** · 06-01-2006, 04:35 PM

Thanks, that should work

i needed the hidden so that i dont have to check all 4 boxes results to find out which one they eventually went with - they only get to choose one item out of the four (thus the revert if they choose a different one). That code should work great, thanks again

**funkdaddu** · 06-01-2006, 11:25 PM

Another option is to use a optgroup label in one drop down to segment the data... check apple's homepage (the retail dropdown) for an example.