Do dependent dropdown in html using javascript with value and text

У меня уже есть зависимый выпадающий список в моей html-форме, используя только javascript, но когда мой PHP-скрипт возвращает значения, они просто нумеруются положением текста в массиве. Я хотел бы иметь и значение и текст одинаковое значение

Вот что у меня есть до сих пор:

СКРИПТ В HEAD TAG:

var my_variable=[
    ["dropA_opt1","dropA_opt2",dropA_opt3"],
    ["dropB_opt1","dropB_opt2",dropB_opt3"],
    ["dropC_opt1","dropC_opt2",dropC_opt3"]
];
function variable(idx) {
    var f=document.my_form;
    f.drop_nr_2.length=null;
    for(var i=0; i<my_variable[idx].length; i++) {
        f.drop_nr_2.options[i]=new Option(my_variable[idx][i], i);
    }
}

Выберите для главного выпадающего списка

<select name="drop_nr_1" onchange="my_variable(this.selectedIndex)">
    <option value="" selected disabled></option>
    <option value="value1">value1</option>
    <option value="value2">value2</option>
</select>

Выберите для зависимого раскрывающегося списка

<select name="drop_nr_2">
</select>

Код, который у меня есть, в основном создает параметры из индекса массива, но нет атрибута value=»». По этой причине я получаю индекс массива обратно — но мне нужно значение= «такой же, как текст».

Кроме того, было бы неплохо, чтобы всегда была выбрана первая опция во 2-м выпадающем списке и отключена с пустым значением (как в выпадающем списке 1).

Очень ценю вашу помощь

1 ответ

  1. При построении <option>с помощью синтаксиса javascript объекта.

    var myOpt = new Option(lbl,val);
    

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

    f.drop_nr_2.options[i]=new Option(my_variable[idx][i], my_variable[idx][i]);
    

    Для второго требования добавьте условиеi===0, когда оно истинно, передайте дополнительный третий параметр (wiz. selected) и сделать disabledсвойство true

    for(var i=0; i<my_variable[idx].length; i++) {
        if(i===0){
            f.drop_nr_2.options[i]=new Option(my_variable[idx][i], my_variable[idx][i],"selected");
            f.drop_nr_2.options[i].disabled= true;
        } else{
            f.drop_nr_2.options[i]=new Option(my_variable[idx][i], my_variable[idx][i]);
        }
    }