Drop-down menu

This site is best viewed in a modern browser with JavaScript enabled.

MissMusical

I am struggling to develop a drop-down menu in Javascript that includes five sports and links to webpages regarding those sports. My five sports are Baseball, basketball, football, hockey, and Nascar. I will be adding three page links in a drop down for each sport. Can anyone provide an example of the script used to create that secondary drop down for each of the sports with the web page choices? Here is the script I have thus far. Thank you!

<!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>

</select>
</form>
</body>

</html>

Padonak

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>title</title>
<script type="text/javascript">
var sports=[
['Baseball','http://baseball_1.com','http://baseball_2.com','http://baseball_3.com'],
['Basketball','http://basketball_1.com','http://basketball_2.com','http://basketball_3.com'],
['Football','http://football_1.com','http://football_2.com','http://football_3.com'],
['Hockey','http://hockey_1.com','http://hockey_2.com','http://hockey_3.com'],
['Nascar','http://nascar_1.com','http://nascar_2.com','http://nascar_3.com']
];

function doc(id){return document.getElementById(id);}

function secondSelect(val){
for(var i=0;i<sports.length;i++){
if(!val){doc('second_sel').innerHTML='';}
if(val===sports[i][0]){
if(!document.getElementById('mylinks')){
var sel=document.createElement('select');
sel.setAttribute('id','mylinks');
doc('second_sel').appendChild(sel);
}
var opts=doc('mylinks').options;
opts.length=0;
for(var k=1;k<4;k++){opts[opts.length]=new Option(sports[i][k].substring(7,sports[i][k].lastIndexOf('.')),sports[i][k]);}
}
else{continue;}
}
}

function firstSelect(){
var sel=document.createElement('select');
sel.setAttribute('id','myList');
doc('first_sel').appendChild(sel);
doc('myList').onchange=function(){secondSelect(this.options[this.selectedIndex].text);}
var opts=doc('myList').options;
opts[0]=new Option('','');
for(var i=0;i<sports.length;i++){opts[opts.length]=new Option(sports[i][0],'');}
}

window.onload=firstSelect;
</script>
</head>
<body>
<form>
Select your sport:
<div id="first_sel" style="display:inline"></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div id="second_sel" style="display:inline"></div>
</form>
</body>
</html>

MissMusical

Your code looks good, but when I try to add a website link, load the page, then try to click on the link I have added for major league baseball, it does not go to the website. At what point would I need to add the link http://mlb.mlb.com/home in order to have it go to Major League Baseball's site?

JMRKER

Alternative, abet similar, version ...

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Sports - Links </title>

<script type="text/javascript"> <!-- src="SportLinks.js" -->
// Following information can be loaded from external file shown above
var Sports = [
    ['Baseball',["Marlins",  'http://www.baseball_1.com'],
                ["Yankees",  'http://www.baseball_2.com'],
                ["White Sox",'http://www.baseball_3.com']
    ],
    ['Basketball',
                ["Heat",  'http://www.basketball_1.com'],
                ["Knicks",'http://www.basketball_2.com'],
                ["Lakers",'http://www.basketball_3.com']
    ],
    ['Football',["Dolphins",'http://www.football_1.com'],
                ["Jaguars", 'http://www.football_2.com'],
                ["Jets",    'http://www.football_.com']
    ],
    ['Hockey',["Panthers", 'http://www.football_1.com'],
              ["Red Wings",'http://www.football_2.com'],
              ["Rangers",  'http://www.footbal_3.com']
    ],
    ['NASCAR',["Gordon", 'http://www.NASCAR_1.com'],
              ["Ernhart",'http://www.NASCAR_2.com'],
              ["Martin", 'http://www.NASCAR_3.com']
    ]
];
</script>

</head>
<body>
<select id="SBoxSports" onchange="showSports(this.value)">
 <option value="">Sports</option>
 <script type="text/javascript">
   var str = '';
   for (var i=0; i<Sports.length; i++) {
     str += '<option>'+Sports[i][0]+'</option>';
   }
   document.write(str);
 </script>
</select>

<select id="SBoxLinks" onchange="alert(this.value)"></select>

<script type="text/javascript">
// For: http://www.webdeveloper.com/forum/showthread.php?p=1132109#post1132109
// Modified for: http://www.webdeveloper.com/forum/showthread.php?277699-Drop-down-menu&daysprune=30

function showSports(sport) {
  var sel = document.getElementById('SBoxLinks');
  sel.options.length=0;
  sel.options[0]=new Option('[SELECT]','',true,true);
  var Items = [];
  for (var i=0; i<Sports.length; i++) {
    if (Sports[i][0] == sport) {
      for (j=1; j<Sports[i].length; j++) { Items.push(Sports[i][j]); }
    }
  }
  for (var x=0; x<Items.length; x++){
    sel.options[sel.options.length]=new Option(Items[x][0],Items[x][1],true,true);
  }
  sel.selectedIndex=0;
}

</script>
</body>
</html>

You will need to change to valid sport lilnks
and replace the alert(this.value) with a function call to go to the URL.
Probably something like window.document.href.location = this.value.