Guidance creating drop-down menus in JavaScript

I am working on a project and need to create drop-downs containing several sports, then some related URLs for users to view. Can anyone give me good direction? I feel lost at this point. Thanks.

 

What are you trying to achieve?

When a User selects something from your dropdown list, some information and URLs about the selected sport is displayed?

 

When a user were to select say Baseball from the list, the would then get another drop down with three choices of baseball related urls. Once they select one of the URL links, it would take them to the page related to that URL.

 

Here's something that should get you started, it uses jQuery.

The Javascript:

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
            // An object of arrays with links for our sports
            // They key of the array should match the value of the option in the #sports_list dropdown list
            var related_urls = {
                soccer: ['http://google.com', 'http://bing.com', 'http://ask.com'],
                baseball: ['http://google.com', 'http://bing.com', 'http://ask.com'],
            };
 
            $(document).ready(function() {
 
                // Hide our div containing the URL dropdown box until its required
                $("#urls").hide();
 
                // When there is a change to the sports list dropdown
                $("#sports_list").change(function(){
                    // Empty the current select box and add a default "Links" option
                    $("#sport_urls").empty().append("<option>Links</option>");
 
                    // Get the sport the User selected
                    var sport = $(this).val();
                   
                    // For each of our URLS in the related_urls array, create an option
                    // in the select box for it
                    $.each(related_urls[sport], function(key, value){
                        $("#sport_urls").append("<option>" + value + "</option>");
                    });
 
                    // Show our div which will contain our newly populated select
                    $("#urls").show();
                });
 
                // When the select containing URLs is changed
                $("#sport_urls").change(function(){
                    // Open up the value of the select ( the URL ) in a new window
                    window.open($(this).val());
                });
            });
        </script>

HTML:

The HTML:

<select id="sports_list">
 
            <option>Select Sport</option>
            <option value="baseball">Baseball</option>
            <option value="soccer">Soccer</option>  
        </select>
 
        <div id="urls">
            <select id="sport_urls">
 
            </select>
        </div>

HTML: