下拉列表的Javascript代码不能正常工作
下拉列表的Javascript代码不能正常工作
提问于 2017-11-13 16:37:11
我已经为创建下拉列表编写了以下代码。Research 的列表运行良好，但与该研究区域相对应的是，第二个列表，即选择教授，应该显示X、Y等选项。没有出现。我代码中的错误是什么？
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function populate(s1, s2) {
var s1 = document.getElementbyId(s1);
var s2 = document.getElementbyId(s2);
s2.innerHTML = "";
if (s1.value == "Deep Learning") {
var optionArray = ["|", "X|X", "Y|Y", "Z|Z", "A|A"];
}
if (s1.value == "Big Data") {
var optionArray = ["|", "X|X", "Y|Y", "Z|Z", "A|A"];
}
if (s1.value == "Cryptography") {
var optionArray = ["|", "X|X", "Y|Y", "Z|Z", "A|A"];
}
if (s1.value == "Algorithms") {
var optionArray = ["|", "X|X", "Y|Y", "Z|Z", "A|A"];
}
if (s1.value == "Embedded Systems") {
var optionArray = ["|", "X|X", "Y|Y", "Z|Z", "A|A"];
}
if (s1.value == "Graphic Design") {
var optionArray = ["|", "X|X", "Y|Y", "Z|Z", "A|A"];
}
if (s1.value == "Computer Architecture") {
var optionArray = ["|", "X|X", "Y|Y", "Z|Z", "A|A"];
}
if (s1.value == "Robotics") {
var optionArray = ["|", "X|X", "Y|Y", "Z|Z", "A|A"];
}
for (var option in optionArray) {
var pair = optionArray[option].split("|")
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
</script>
</head>
<body>
<h2>Choose Accordingly</h2>
<hr/> Choose Research Area:
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
<option value=""></option>
<option value="Deep Learning">Deep Learning</option>
<option value="Big Data">Big Data</option>
<option value="Cryptography">Cryptography</option>
<option value="Algorithms">Algorithms</option>
<option value="Embedded Systems">Embedded Systems</option>
<option value="Graphic Design">Graphic Design</option>
<option value="Computer Architecture">Computer Architecture</option>
<option value="Robotics">Robotics</option>
</select>
<hr/> Choose Professor:
<select id="slct2" name="slct2"></select>
<hr />
</body>
</html>回答 2
Stack Overflow用户
发布于 2017-11-13 16:42:14
您有一个错误的document.getElementbyId应该是document.getElementById，并且不管您在第一个下拉列表中选择了什么，您都在第二个下拉列表中填充相同的值。所以不需要这些if条件
function populate(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
var optionArray = ["|", "X|X", "Y|Y", "Z|Z", "A|A"];
for (var option in optionArray) {
var pair = optionArray[option].split("|")
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}<h2>Choose Accordingly</h2>
<hr/> Choose Research Area:
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
<option value=""></option>
<option value="Deep Learning">Deep Learning</option>
<option value="Big Data">Big Data</option>
<option value="Cryptography">Cryptography</option>
<option value="Algorithms">Algorithms</option>
<option value="Embedded Systems">Embedded Systems</option>
<option value="Graphic Design">Graphic Design</option>
<option value="Computer Architecture">Computer Architecture</option>
<option value="Robotics">Robotics</option>
</select>
<hr/> Choose Professor:
<select id="slct2" name="slct2"></select>
<hr />
Stack Overflow用户
发布于 2017-11-13 16:52:37
用..。S2.附录儿童(NewOption)，代替s2.options.add(newOption)；
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47269233
复制相关文章
相似问题
腾讯云开发者
