Как я могу создать список ссылок на основе выпадающего меню?

0

Итак, у меня есть куча информации для группы разных стран, и я пытаюсь ее отсортировать так:

Выпадающее меню, чтобы выбрать страну → Выпадающее меню, чтобы выбрать тип информации → здесь ссылка на эту информацию

Я не так хорош с 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>

Так что теперь мне интересно, как я могу принять этот вторичный выбор и использовать его для создания списка ссылок для кого-то на выбор - скажем, в новом абзаце текста или что-то в этом роде.

Первый раз задавая вопрос здесь, извините, если сбивать с толку.

  • 0
    Можете ли вы дать некоторые репрезентативные данные, чтобы проиллюстрировать вашу проблему? Если первый элемент <select> имеет две опции a и b , какие опции должны быть представлены во втором элементе <select> ? И как вариант, выбранный во втором <select> повлияет на ссылки, которые будут представлены?
  • 0
    Первый элемент select будет иметь около сорока опций - все разные страны. Во втором элементе выбора будет отображаться до четырех параметров: «История», «Юридические справочники», «Обзор страны» и «Демография» (у меня нет некоторой информации о некоторых странах, поэтому в зависимости от выбранной страны их может быть меньше). чем максимум четыре варианта во втором элементе выбора).
Показать ещё 1 комментарий
Теги:
arrays
drop-down-menu

1 ответ

0

Сначала добавьте куда-нибудь этот список ссылок. Я бы поместил его в неупорядоченный список (<ul></ul>). Но вы могли бы просто поместить его в абзац или div.

Я предполагаю, что вы знаете об объектах и цикл 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 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>

Изменение: Исправлены ошибки в коде

  • 0
    Спасибо за ваш ответ. Я опробовал ваш код, но кажется, что вторичный выпадающий список не заполняется. Боюсь, я действительно ДЕЙСТВИТЕЛЬНО новичок в JavaScript. Я прочитаю статью, на которую вы ссылались.
  • 0
    Я так разорен Сам не запускал код. Я буду запускать его и обновлять :)
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню