更改下拉选项卡与数组的选择
问题描述:
我有多个下拉选项卡,我想通过使用数组填充,我想某些下拉选项卡导致更改其他下拉选项卡将显示什么。所以我使用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新手,所以很抱歉,如果这不是一个很好的问题,出于某种原因,我的简单问题被拒绝了,但嘿,我们都需要在某处学习。
答
您确定要在负载下运行吗?而不是为了响应第一次选择的变化?
我觉得你这样的事情之后是:
<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);
;
}
}
};
请注意,我已经清除了第二个选项与“选项中进行选择。长度= 0'在添加之前。
你提到你是新来的js,所以我想我会提到一对夫妇的其他概念,你可以查找到自己省力/代码:
- 使用switch语句代替if/else
- 不要重复自己(DRY)。无论是使用的if/else开关的,你应该能够:
- 清除选项
- 交换机内确定合适的选项数组
- 外面/开关后(或的if/else)添加元素的选择(在“for”循环您已经重复这两个选项)
我想无论是,无论是在负载或选择运行。我不知道如何真正设置它,这就是为什么我设置它,与onload。 1问题我虽然正在获取下拉框来显示旁边的名称下拉框被称为。 我已经改变了你略微代码 票额:电影名称: 但我只能拿到Dropbox旁边的门票数量,而不是电影名称,如果你可以摆脱一些灯光,将不胜感激 – kmce
太棒了!如果这对你有帮助,请接受答案。你最后选择的问题是它不在我想。看看这个codePen:https://codepen.io/morganisbatman/pen/xPqypx –