如何根据下拉菜单选项生成链接列表

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

本文关键字：链接 列表 选项 何根 下拉菜单      更新时间：2023-09-26

所以我有一堆关于不同国家的信息，我正试图将其分类如下：

下拉菜单选择国家->下拉菜单选择信息类型->这里有该信息的链接

我不太擅长javascript，但我找到了这个解决方案，可以根据从第一个下拉列表中选择的内容来更改第二个下拉列表的内容：

<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>

然后是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>

因此，现在我想知道如何进行第二选择，并使用它生成一个链接列表供某人选择——比如，在一段新的文本或其他内容中。

第一次在这里问问题，如果混淆了，很抱歉。

首先添加这个链接列表可以去的地方。我会把它放在一个无序的列表（<ul></ul>）中。但你也可以把它放在一段或一段中。

我假设您了解对象和for/in循环。如果没有，这应该有助于您获得：https://javascriptweblog.wordpress.com/2011/01/04/exploring-javascript-for-in-loops/

这是我为你做的代码。我一直在评论它。只要问一下是否有什么不清楚的地方：）阿尔巴尼亚安道尔

    <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>

编辑：修复了的代码错误

相关文章：