使用带有值和文本的 javascript 在 html 中执行依赖下拉菜单

Question

我的 html 表单中已经有一个依赖下拉列表，仅使用 javascript，但是当我的 php 脚本 returns 值时，这些仅由文本在数组中的位置。我希望 Value 和 Text 具有相同的值

这是我目前的情况：

头标记中的脚本：

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

我的代码基本上是从数组索引创建选项，但没有 value="" 属性。出于这个原因，我正在取回数组索引 - 但我需要一个 value="same as the text".

此外，如果始终选择第二个下拉列表中的第一个选项并使用空值将其禁用（就像在下拉列表 1 中一样），那就更好了。

非常感谢您的帮助

Answer 1

使用 javascript 对象语法构造 <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 添加一个条件，传递额外的第三个参数（wiz.selected）并使 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]);
    }
}

使用带有值和文本的 javascript 在 html 中执行依赖下拉菜单

Do dependent dropdown in html using javascript with value and text

javascript

arrays

dependencies

option