下拉列表的Javascript代碼無法正常運行
[英]Javascript code for Drop Down List not working properly
問題描述
我已經編寫了以下用於創建下拉列表的代碼。 “ 研究領域 ”列表工作正常，但與該研究領域相對應，第二個列表即“選擇教授” ，該列表應顯示諸如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 個解決方案
解決方案1
1 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 />
解決方案2
-1 2017-11-13 16:52:37
使用... s2.appendChild（newOption）; 代替s2.options.add（newOption）;
下拉列表不起作用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.