Drop-Down Menu project

**MissMusical** · 05-10-2013, 12:47 PM

I am trying to create a drop-down set of menus that lists five sports, when a sport is clicked on, another drop-down opens with three links for that sport. When a link is clicked, it will take the user to the website for that link. Here is what I have so far, PLEASE help! I need to get this done today. Thanks!!

Code:

<!DOCTYPE html>
<html>
<head>
<script>
function favBrowser()
{
var mylist=document.getElementById("myList");
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text;
}
</script>
</head>

<body>
<form>
Select your sport:
<select id="myList" onchange="mySport()">
  <option></option>
  <option>Baseball</option>
  <option>Basketball</option>  
  <option>Football</option>
  <option>Hockey</option>
  <option>Nascar</option>
<script>
function mysport()
{
var mylist=document.getElementById("myList");
document.getElementById("sport").value=mylist.options[mylist.selectedIndex].text;
}
</script>
<form>
Select a link:
<select id="myList2" onclick="Baseball" onChange="baseLink()">
  <option></option>
	<option>www.mlb.com</option>
        <option>www.baseballamerica.com</option>       
        <option>www.baseball-almanac.com</option>
<select id="myList3" onclick="Basketball" onChange="basketLink()">
  <option></option>
	<option>www.nba.com</option>
        <option>www.ncaa.com</option>       
        <option>www.nbahoopsonline.com</option>
<select id="myList4" onclick="Football" onChange="footLink()">
  <option></option>
	<option>www.nfl.com</option>
        <option>www.bleacherreport.com</option>       
        <option>www.homeoffootball.org</option>
<select id="myList2" onclick="Hockey" onChange="hockeyLink()">
  <option></option>
	<option>www.nhl.com</option>
        <option>www.collegehockeyinc.com.com</option>       
        <option>www.historyofhockey.net</option>
<select id="myList2" onclick="Nascar" onChange="carLink()">
  <option></option>
	<option>www.nascar.com</option>
        <option>www.nascar.speedtv.com</option>       
        <option>www.decadeofracing.net</option>
</body>
</form>
</script>
	
  
</select>
</form>
</body>

</html>

**vwphillips** · 05-10-2013, 01:49 PM

Code:

<!DOCTYPE html>
<html>
<head>
<script>
function favBrowser()
{
var mylist=document.getElementById("myList");
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text;
}
</script>
<script type="text/javascript">
/*<![CDATA[*/
var myArray=[];
 myArray['Baseball']=[['www.mlb.com'],['www.baseballamerica.com'],['www.baseball-almanac.com']];
 myArray['Basketball']=[['www.nba.com'],['www.ncaa.com'],['www.nbahoopsonline.com']];
 myArray['Football']=[['www.nfl.com'],['www.bleacherreport.com'],['www.homeoffootball.org']];
 myArray['Hockey']=[['www.nhl.com'],['www.collegehockeyinc.com.com'],['www.historyofhockey.net']];
 myArray['Nascar']=[['www.nascar.com'],['www.nascar.speedtv.com'],['www.decadeofracing.net']];

function mySport(v,id){
 var mylist=document.getElementById(id),ary=myArray[v];
 if (mylist){
  mylist.options.length=0;
  if (ary){
   mylist.options[0]=new Option(v,'');
   for (var z0=0;z0<ary.length;z0++){
    mylist.options[z0+1]=new Option(ary[z0][0],ary[z0][1]||ary[z0][0]);
   }
  }
  mylist.selectedIndex=0;
 }
}

function baseLink(v){
 if (v){
  window.top.location=v;
 }
}

/*]]>*/
</script>
</head>

<body>
<form>
Select your sport:
<select id="myList" onchange="mySport(this.value,'myList2')">
<option>Select Sport</option>
<option value="Baseball">Baseball</option>
<option value="Basketball">Basketball</option>
<option value="Football">Football</option>
<option value="Hockey">Hockey</option>
<option value="Nascar">Nascar</option>
</select>
<select id="myList2" onchange="baseLink(this.value)">
</select>
</form>

</body>

</html>