javascript - 如何使用 javascript 更改基于另一个下拉列表的下拉列表值？

Question

我有三个<select>我网页上的下拉列表:成人、 child 和婴儿(想想航空公司预订网站)。

一般来说，成人 下拉菜单的选项编号为 1-9， child 下拉菜单的选项编号为 0-8，婴儿下拉菜单的选项编号为 0-1。如果用户选择成人值4， child 下拉列表中的可用数字应更改为 0-5 和婴儿 下拉列表应更改以反射(reflect) 0-4。

我正在尝试使用 javascript 实现此目的，但总是卡住。如有必要，很乐意提供更多信息 - 请告诉我您需要查看的内容。

这是我目前所拥有的:

function MyApp(sender) {
    var ListBox1Id = '<%= ddl1.ClientID %>';
    var ListBox2Id = '<%= ddl2.ClientID %>';
    var ListBox3Id = '<%= ddl3.ClientID %>';

    var selectedIndex = document.getElementById(ListBox1Id).selectedIndex;
    var ii = document.getElementById(ListBox1Id).options[selectedIndex].value;
    var count = document.getElementById(ListBox1Id).length;

    if (ii != 0) {
        for (var k = 0; k <= count - ii; k++) {
            document.getElementById(ListBox2Id).value = k;
        }
    }
}

这是我在Adult 下拉菜单的 onchange 上调用的函数事件，并且我编写了脚本，用于根据 Adult 下拉菜单的选择显示 Child 下拉菜单的值。

Answer 1

var ListBox1Id = '<%= ddl1.ClientID %>';
var ListBox2Id = '<%= ddl2.ClientID %>';
var ListBox3Id = '<%= ddl3.ClientID %>';

var count = $("#"+ListBox1Id+"option:selected").text();
var listbox2 = document.getElementById(ListBox2Id);

listbox2.empty();
for(var i=0; i++; i <= count){
listbox2.append(
    $('<option></option>').val(i).html(i)
);
}
var listbox3 = document.getElementById(ListBox3Id);

listbox3.empty();
for(var j=0; j++; j < count){
listbox3.append(
    $('<option></option>').val(j).html(j)
);
}

根据此修改您的代码，更改计数逻辑(如果需要)，应该可以开始了。希望对您有所帮助 :)