Log in

View Full Version : 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!!


<!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
<!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>
MissMusical
05-11-2013, 01:59 AM
Thanks for your help