jb77
05-04-2006, 10:17 AM
Hello,
I'm a newbie stuck trying to figure out what's wrong with my code...
I have a select menu that I want to show/hide certain divs when an option has been selected. The script I've got works when it's alone on a html page, but in my template, the menu doesn't respond when clicked. Can anybody help me with this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css" media="all">@import "1.css";</style>
<script type="text/javascript">
<!--
function changeDiv(the_div,the_change)
{
var the_style = getStyleObject(the_div);
if (the_style != false)
{
the_style.display = the_change;
}
}
function hideAll()
{
changeDiv("tennessee","none");
changeDiv("texas","none");
changeDiv("virginia","none");
}
function getStyleObject(objectId) {
if (document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId).style;
} else if (document.all && document.all(objectId)) {
return document.all(objectId).style;
} else {
return false;
}
}
// -->
</script>
</head>
<body>
<!--#include file="header.asp"-->
<!--#include file="leftnav.asp"-->
<div id="content">
<h2>District Office Locator</h2>
<p>To find the Office that serves you, please select your state:</p>
<form name="the_form">
<select name="states" onChange="hideAll(); changeDiv('this.options[this.selectedIndex].text','block');">
<option selected>Select A State</option>
<option value="tennessee">Tennessee</option>
<option value="texas">Texas</option>
<option value="virginia">Virginia</option>
</select>
<div id="tennessee" style="display:none">
<h3>Tennessee</h3>
<ul>
<li><a href="DistrictOfficeInfo.asp?dist=45">Chattanooga</a></li>
<li><a href="DistrictOfficeInfo.asp?dist=155">Dyersburg</a></li>
</ul>
</div>
<div id="texas" style="display:none">
<h3>Texas</h3>
<ul>
<li><a href="DistrictOfficeInfo.asp?dist=157">Austin</a></li>
<li><a href="DistrictOfficeInfo.asp?dist=132">Fort Worth</a></li>
</ul>
</div>
<div id="virginia" style="display:none">
<h3>Virginia</h3>
<ul>
<li><a href="DistrictOfficeInfo.asp?dist=163">Richmond</a></li>
<li><a href="DistrictOfficeInfo.asp?dist=161">Virginia Beach</a></li>
</ul>
</div>
</form>
</div>
<!--#include file="footer.asp"-->
</body>
</html>
I'm a newbie stuck trying to figure out what's wrong with my code...
I have a select menu that I want to show/hide certain divs when an option has been selected. The script I've got works when it's alone on a html page, but in my template, the menu doesn't respond when clicked. Can anybody help me with this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css" media="all">@import "1.css";</style>
<script type="text/javascript">
<!--
function changeDiv(the_div,the_change)
{
var the_style = getStyleObject(the_div);
if (the_style != false)
{
the_style.display = the_change;
}
}
function hideAll()
{
changeDiv("tennessee","none");
changeDiv("texas","none");
changeDiv("virginia","none");
}
function getStyleObject(objectId) {
if (document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId).style;
} else if (document.all && document.all(objectId)) {
return document.all(objectId).style;
} else {
return false;
}
}
// -->
</script>
</head>
<body>
<!--#include file="header.asp"-->
<!--#include file="leftnav.asp"-->
<div id="content">
<h2>District Office Locator</h2>
<p>To find the Office that serves you, please select your state:</p>
<form name="the_form">
<select name="states" onChange="hideAll(); changeDiv('this.options[this.selectedIndex].text','block');">
<option selected>Select A State</option>
<option value="tennessee">Tennessee</option>
<option value="texas">Texas</option>
<option value="virginia">Virginia</option>
</select>
<div id="tennessee" style="display:none">
<h3>Tennessee</h3>
<ul>
<li><a href="DistrictOfficeInfo.asp?dist=45">Chattanooga</a></li>
<li><a href="DistrictOfficeInfo.asp?dist=155">Dyersburg</a></li>
</ul>
</div>
<div id="texas" style="display:none">
<h3>Texas</h3>
<ul>
<li><a href="DistrictOfficeInfo.asp?dist=157">Austin</a></li>
<li><a href="DistrictOfficeInfo.asp?dist=132">Fort Worth</a></li>
</ul>
</div>
<div id="virginia" style="display:none">
<h3>Virginia</h3>
<ul>
<li><a href="DistrictOfficeInfo.asp?dist=163">Richmond</a></li>
<li><a href="DistrictOfficeInfo.asp?dist=161">Virginia Beach</a></li>
</ul>
</div>
</form>
</div>
<!--#include file="footer.asp"-->
</body>
</html>