Сделайте зависимое выпадающее меню в html с помощью javascript со значением и текстом

Question

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

Вот то, что я до сих пор:

SCRIPT в голове 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); 
    } 
} 

ВЫБРАТЬ для главного DropDown

<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 для зависимых DROPDOWN

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

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

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

Ценю вашу помощь

Answer 1

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

var myOpt = new Option(lbl,val); 

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

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

В секунду требование добавить условие для i===0 когда это правда проходит дополнительный третий параметр (профессионал. выбрано) и сделать disabled свойства верно

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]); 
    } 
}