www.webdeveloper.com
Results 1 to 4 of 4

Thread: Drop-down menu

  1. #1
    Join Date
    May 2013
    Posts
    2

    Drop-down menu

    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>

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    Code:
    <!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>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    May 2013
    Posts
    2
    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?

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,257

    Lightbulb

    Alternative, abet similar, version ...
    Code:
    <!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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles