JavaScript Forum

**stoot98** · 09-17-2006, 07:48 PM

Hey

Im looking to get the code that will allow a user to select an option from a dropdown menu and then have the relevant DIV displayed, displaying a further dropdown (so when a City is chosen the dropdown containing the Areas within that city are displayed). I'm not sure how you execute a function triggered by the dropdown selection.

Any help is appreciated.

Cheers
Stoot

**funkdaddu** · 10:31 PM

There are a couple different ways to do it, but here is one:

HTML Code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

	<head>
		<title>Untitled Page</title>
		<script type="text/javascript"><!--
var hiddenDivs = new Array();

window.onload = function() {
	//gets the all hidden divs so we can reset them all to hidden when we choose a new one
	var myDivs = document.getElementsByTagName("DIV");
	for (i=0; i<myDivs.length; i++) {
		if (myDivs[i].className == "city") {
			//hide them as we enter them into the array - if JS is on - they're hidden, and if JS is off we still see al of them
			myDivs[i].className = "hiddenCity";
			hiddenDivs.push(myDivs[i]);
		}
	}
}		

function show(divName) {
	//removes the space, as you can't have a div with a space in it
	divName = divName.replace(/ /g,"");
	//hides all the divs
	for (i=0; i<hiddenDivs.length; i++) {
		hiddenDivs[i].className = "hiddenCity";
	}
	//if the div exists - shows the selected div
	if (divName != "" && document.getElementById(divName)) {
		document.getElementById(divName).className = "city";
	}
	
}
//--></script>
		<style type="text/css"><!--
.hiddenCity {
	display: none;
	border: 1px grey solid;
	background-color: whitesmoke;
}

.city {
	display: block;
	border: 1px grey solid;
	background-color: whitesmoke;
	padding: 1em
}
//-->		</style>
	</head>

	<body>
	<div>Choose a city</div>
		<form action="submit.php" method="get">
			<p><select name="city" onchange="show(this.value);">
				<option value="">Choose One...</option>
				<option value="Sulfer Springs">Sulfer Springs</option>
				<option value="Death Valley">Death Valley</option>
				<option value="Pleasant Falls">Pleasant Falls</option>
			</select></p>
		</form>
		<div id="SulferSprings" class="city">Sulfer Springs Div</div>
		<div id="DeathValley" class="city">Death Valley Div</div>
		<div id="PleasantFalls" class="city">Pleasant Falls Div</div>
	</body>

</html>

Any questions?

**stoot98** · 09-18-2006, 11:22 AM

Excellent thanks!

Couple of follow up questions...

The DIVs that are being made visible are to contain further dropdown boxes but it seems the form only passes the first created DIV which isnt necesarily the one that is unhidden and selected from. Am i wrong in this? or is there a solution or way around it if this is the case?

Cheers
Stoot

**funkdaddu** · 09-18-2006, 03:42 PM

Any children inside the DIV with be shown when the DIV is shown, unless you have a CSS style tell it otherwise.