How can I generate a list of links based on dropdown menu choices?

Question

So I've got a bunch of information for a bunch of different countries, and I'm trying to get it sorted like so:

Dropdown menu to choose a country -> Dropdown menu to choose information type -> here's a link to that information

I'm not so great with javascript, but I found this solution that allows me to change the content of the second dropdown based on the selection chosen from the first dropdown:

<script type="text/javascript">
    function configureDropDownLists(ddl1, ddl2) {
        var albania = new Array('History', 'Legal Guides');
        var andorra = new Array('Country Overview', 'Demographics', 'Legal Guides');


        switch (ddl1.value) {
            case 'Albania':
                document.getElementById(ddl2).options.length = 0;
                for (i = 0; i < albania.length; i++) {
                    createOption(document.getElementById(ddl2), albania[i], albania[i]);
                }
                break;
            case 'Andorra':
                document.getElementById(ddl2).options.length = 0;
                for (i = 0; i < andorra.length; i++) {
                    createOption(document.getElementById(ddl2), andorra[i], andorra[i]);
                }
                break;
        }

    }

    function createOption(ddl, text, value) {
        var opt = document.createElement('option');
        opt.value = value;
        opt.text = text;
        ddl.options.add(opt);
    }
</script>

And then the dropdown boxes, in the HTML:

<select id="ddl" onchange="configureDropDownLists(this,'ddl2')">
<option value=""></option>
<option value="Albania">Albania</option>
<option value="Andorra">Andorra</option>
</select>

<select id="ddl2">
</select>

So now I'm wondering how I can take that secondary choice and use it to generate a list of links for someone to choose from--say, within a new paragraph of text or something.

First time asking a question here, sorry if confusing.

Can you give some representative data to illustrate your problem? If the first <select> element has two options a and b, what options should be presented in the second <select>? And how would the option chosen in the second <select> influence the links to be presented? — David Thomas
The first select element is going to have around forty options--all different countries. The second select element will then display up to four options--History, Legal Guides, Country Overview, and Demographics (I don't have some of the information for some of the countries, so depending on which country is chosen there may be less than the maximum four choices in the second select element). — user3570707
Once the second select element is chosen, I'd like to create a list of links to that information (I may have more than one link per category per country). So first I'd choose Andorra, then the second select will fill with the four categories of information I have on Andorra (History, Legal Guides, Country Overview, and Demographics). Then if I select Demographics, a list of links to articles/sites I've chosen about Andorra's demographics will be generated in a <ul> element on the same page. — user3570707

Andreas Storvik Strauman Andreas Storvik Strauman · Accepted Answer · 2014-04-24T21:59:05

First add somewhere this link list could go. I'd put it in a unordered list (<ul></ul>). But you could just as well put it in a paragraph or a div.

I assume you know about objects and the for / in loop. If not, this should help you get it: https://javascriptweblog.wordpress.com/2011/01/04/exploring-javascript-for-in-loops/

Here is the code I made for you. I have commented it along the way. Just ask if something is unclear :) Albania Andorra

    <select id="ddl2" onchange="configureDropDownLists('ddl2')">
    </select>

    <ul id='linkList'></ul>

    <script type="text/javascript">
    function configureDropDownLists(ddlBeingChanged) {
        var ddl = document.getElementById('ddlBeingChanged');
        var ddl1ChosenValue=document.getElementById('ddl1').value;


        var linkLists = {
            albania: {
                "history": ['http://albania.example.com/history', 'http://albania.example.com/historyTwo'],
                "legal guides": ['http://albania.example.com/guide', 'http://albania.example.com/guideTwo'],
            },

            andorra: {
                "country overview": ['http://andorra.example.com/country', 'http://andorra.example.com/overview'],
                "demographics": ['http://andorra.example.com/demographics', 'http://andorra.example.com/demographicsTwo'],
                "legal guides": ['http://andorra.example.com/guide', 'http://andorra.example.com/guideTwo'],
            }
        };

        if (ddlBeingChanged == "ddl1") {
            console.log(ddl1ChosenValue);
            for (var ddl2 in linkLists[ddl1ChosenValue]){
                console.log(ddl2);
                // Here the ddl2 variable will contain the first level of the object 'linkLists'. I.E. the country names.
                createOption(document.getElementById('ddl2'), ddl2, ddl2);    
            }
        } else if (ddlBeingChanged == "ddl2") {
            var ddl2ChosenValue=document.getElementById('ddl2').value;


            var linkArray=linkLists[ddl1ChosenValue][ddl2ChosenValue];
            // The linkArray:
            // Let's say someone chose andorra and demographics
            // then linkLists[ddl1ChosenValue][ddl2ChosenValue] would be equivalent to linkLists.andorra.demographics

            var linkListHTML="";
            for (var i in linkArray){
                var URL=linkArray[i];
                linkListHTML+="<li><a href='"+URL+"'>"+URL+"</a></li>";
            }
            document.getElementById('linkList').innerHTML=linkListHTML;

        }


    }

    function createOption(ddl, text, value) {
        var opt = document.createElement('option');
        opt.value = value;
        opt.text = text;
        ddl.options.add(opt);
    }
    </script>

Edit: Fixed code bugs

How can I generate a list of links based on dropdown menu choices?

1 Answers