HTML - Как соединить два выпадающих и сделать второй кликабельным - PullRequest
Новая
       6

HTML - Как соединить два выпадающих и сделать второй кликабельным

0 голосов
/ 25 апреля 2018

Я подключил два выпадающих меню, используя этот код: 

<script>
function populate(s1,s2){
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = "";
    if(s1.value == "Chevy"){
        var optionArray = ["|","camaro|Camaro","corvette|Corvette","impala|Impala"];
    } else if(s1.value == "Dodge"){
        var optionArray = ["|","avenger|Avenger","challenger|Challenger","charger|Charger"];
    } else if(s1.value == "Ford"){
        var optionArray = ["|","mustang|Mustang","shelby|Shelby"];
    }
    for(var option in optionArray){
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);
    }
}



</script>

и 

    <select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
  <option value=""></option>
  <option value="Chevy">Chevy</option>
  <option value="Dodge">Dodge</option>
  <option value="Ford">Ford</option>
</select>
Choose Car Model:
<select id="slct2" name="slct2"></select>

, теперь я хочу сделать опции во втором раскрывающемся меню (модели) интерактивными.Для других сайтов, например: страница каждой модели.Все, что происходит на одной странице внутри одного

Я использую HTML, CSS, Java-скрипт ...

Ответы [ 2 ]

0 голосов
/ 25 апреля 2018

Насколько я понял, вы выглядите примерно так: 

<select id="slct1" name="slct1">
    <option value=""></option>
    <option value="Chevy">Chevy</option>
    <option value="Dodge">Dodge</option>
    <option value="Ford">Ford</option>
</select><br>
Choose Car Model:
<select id="slct2" name="slct2"></select>

Я бы переосмыслил часть Javascript и использовал бы jquery для доступа к DOM: 

// you can update this object to be as big as you want
var OPTION_ARRAY = {
    chevy: {
        camaro: {
            value: 'camaro',
            key: 'Camaro',
        },
        corvette: {
            value: 'corvette',
            key: 'Corvette',
        },
    },
    dodge: {
        avenger: {
            value: 'avenger',
            key: 'Avenger',
        }
    },
};

function cleanSelect2() {
    $('#slct2').find('option').remove().end();
}

function fillSelect2(value) {
    var values = OPTION_ARRAY[value.toLowerCase()];
    var $mySelect = $('#slct2');
    for (var element in values) {
        if (values.hasOwnProperty(element)) {
            $mySelect
                .append($('<option></option>')
                .attr('value', values[element].value)
                .text(values[element].key));
        }
    }
}

$('#slct1').change(function() {
    var $this = $(this);
    var value = $this.val();
    cleanSelect2();
    fillSelect2(value);
});
0 голосов
/ 25 апреля 2018

Вы добавляете опции для второго раскрывающегося списка, используя функцию заполнения в скрипте. И да, это будет кликабельно, так как это выпадающий список вариантов. Если вы хотите вызвать функцию при втором нажатии drpdown, вы можете добавить onchange, как вы добавили в первый раз.

...