使用数组选项更改下拉选项卡

Question

我有多个下拉选项卡，我想使用数组填充这些选项卡，并且我希望某些下拉选项卡导致其他下拉选项卡将显示的内容发生变化。所以我使用 if 语句设置数组。但它似乎不起作用，我不确定是因为他们的方式我只是完成了它，基本上不能那样编程，或者如果我在某处犯了一个愚蠢的错误。

这是我的代码

var ticketAmount_ = document.getElementById("ticketAmount");
var options = ["1", "2", "3", "4"];
for (var i = 0; i < options.length; i++) {
var opt = options [i];
var element = document.createElement("option");
element.textContent = opt;
element.value = opt;
ticketAmount_.appendChild(element);
;
}
var movieName = function() {
document.getElementById('movieName').options.length = 0;
if (document.getElementById("ticketAmount").value == 1) {
var movieSelection1 = document.getElementById("movieName");
var options = ["A", "B", "C", "D"];
for (var i = 0; i < options.length; i++) {
    var opt = options [i];
    var element = document.createElement("option");
    element.textContent = opt;
    element.value = opt;
    movieSelection1.appendChild(element);
}
}
else if
 (document.getElementById("ticketAmount").value == 2) {
var movieSelection2 = document.getElementById("movieName");
var options = ["E", "F", "G", "H"];
for (var i = 0; i < options.length; i++) {
    var opt = options [i];
    var element = document.createElement("option");
    element.textContent = opt;
    element.value = opt;
    movieSelection2.appendChild(element);
    ;
}
}
};

我把movieName函数设置为在window.onload上启动。

这真的可以做到吗？

我是javascript的新手，所以很抱歉，如果这不是一个好问题，出于某种原因，我的简单问题被否决了，但是嘿，我们都需要在某个地方学习。

Answer 1

您确定要它在加载时运行吗？ 而不是响应第一个选择的变化？

我认为你追求的是这样的事情：

<div>
  <select id='ticketAmount' onchange="movieName()"></select>
  <select id='movieName'></select>
</div>

然后对于您的 JS：

var ticketAmount_ = document.getElementById("ticketAmount");
var options = ["1", "2", "3", "4"];
for (var i = 0; i < options.length; i++) {
    var opt = options [i];
    var element = document.createElement("option");
    element.textContent = opt;
    element.value = opt;
    ticketAmount_.appendChild(element);
    ;
}
var movieName = function() {
document.getElementById('movieName').options.length = 0;
if (document.getElementById("ticketAmount").value == 1) {
    var movieSelection1 = document.getElementById("movieName");
    var options = ["A", "B", "C", "D"];
    for (var i = 0; i < options.length; i++) {
        var opt = options [i];
        var element = document.createElement("option");
        element.textContent = opt;
        element.value = opt;
        movieSelection1.appendChild(element);
    }
}
else if
(document.getElementById("ticketAmount").value == 2) {
    var movieSelection2 = document.getElementById("movieName");
    var options = ["E", "F", "G", "H"];
    for (var i = 0; i < options.length; i++) {
        var opt = options [i];
        var element = document.createElement("option");
        element.textContent = opt;
        element.value = opt;
        movieSelection2.appendChild(element);
        ;
    }
}
};

请注意，在添加选项之前，我已经清除了第二个选择中的选项，其中包含"options.length = 0"。

你已经提到你是js的新手，所以我想我会提到其他几个概念，你可以查找以节省自己的精力/代码：

• 使用 Switch 语句代替 if/else
• 不要重复自己(DRY(。 无论是使用 if/else 开关，您都应该能够：
  1. 清除选项
  2. 在交换机内部确定一系列适当的选项
  3. 在开关外部/之后(或 if/else(将元素添加到 SELECT(您为两个选项重复的"for"循环(