<!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" lang="en">
<head>
<title>Pulldown Nav Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
.nochoice {color: black;}
.choice {color: blue;}
</style>
<script type="text/javascript">
function redirect(pulldown)
{
newlocation = pulldown[pulldown.selectedIndex].value;
if (newlocation != "")
C h a p t e r 1 4 : J a v a S c r i p t a n d D H T M L 463
self.location = newlocation;
}
function resetIfBlank(pulldown)
{
possiblenewlocation = pulldown[pulldown.selectedIndex].value;
if (possiblenewlocation == "")
pulldown.selectedIndex = 0; /* reset to start since no movement */
}
</script>
</head>
<body>
<form action="#" name="navForm" id="navForm">
<b>Favorite Sites:</b>
<select name="menu" id="menu" onchange="resetIfBlank(this);">
<option value="" class="nochoice" selected="selected">Choose your site
</option>
<option value="" class="nochoice"></option>
<option value="" class="nochoice">Search Sites</option>
<option value="" class="nochoice">---------------------------</option>
<option value="http://www.yahoo.com" class="choice">Yahoo!</option>
<option value="http://www.msn.com" class="choice">MSN</option>
<option value="http://www.google.com" class="choice">Google</option>
<option value="" class="nochoice"></option>
<option value="" class="nochoice">Demos</option>
<option value="" class="nochoice">---------------------------</option>
<option value="http://www.democompany.com" class="choice">
Demo Company</option>
</select>
<input type="button" value="go"
onclick="redirect(document.navForm.menu);" />
</form>
<script type="text/javascript">
document.navForm.menu.selectedIndex = 0;
</script>
</body>
</html>