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?
__________________
Will Work For Talkputation...
Last edited by funkdaddu : 09-17-2006 at 09:31 PM.
|
