Results 1 to 3 of 3

Thread: Drop-Down Menu project

  1. #1
    Join Date
    May 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Drop-Down Menu project

    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>
    Last edited by jscheuer1; 05-11-2013 at 02:26 AM. Reason: Format

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 421 Times in 415 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    May 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thank you!

    Thanks for your help
    Last edited by jscheuer1; 05-11-2013 at 02:25 AM. Reason: Format

Similar Threads

  1. Help with my uni project please?
    By louisaivy in forum The lounge
    Replies: 2
    Last Post: 11-01-2011, 03:52 AM
  2. Project
    By shaun001 in forum CSS
    Replies: 1
    Last Post: 02-07-2010, 10:08 PM
  3. Help with getting this for my project
    By Live4it in forum CSS
    Replies: 2
    Last Post: 01-11-2008, 08:26 PM
  4. Replies: 9
    Last Post: 11-02-2006, 09:50 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •