下拉列表的Javascript代码无法正常运行

Question

I have written the following code for creating drop-down lists. 我已经编写了以下用于创建下拉列表的代码。 The list for Research Area is working fine but corresponding to that research area, the second list viz Choose Professor which should show options like X, Y etc. is not appearing. “ 研究领域 ”列表工作正常，但与该研究领域相对应，第二个列表即“选择教授” ，该列表应显示诸如X，Y等选项。 What is the bug in my code? 我的代码中的错误是什么？

<!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>

Answer 1

You have a typo document.getElementbyId should be document.getElementById and you are populating the same values in the second dropdown no matter what you select in the first one. 您有一个错字document.getElementbyId应该是document.getElementById ，无论您在第一个下拉列表中选择什么，都将在第二个下拉列表中填充相同的值。 So there is no need of these if conditions 因此， 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 />

Answer 2

Use... s2.appendChild(newOption); 使用... s2.appendChild（newOption）; Instead of s2.options.add(newOption); 代替s2.options.add（newOption）;

下拉列表的Javascript代码无法正常运行

问题描述

2 个解决方案

解决方案1
1 2017-11-13 16:42:14

解决方案2
-1 2017-11-13 16:52:37

下拉列表的Javascript代码无法正常运行

问题描述

2 个解决方案

解决方案1 1 2017-11-13 16:42:14

解决方案2 -1 2017-11-13 16:52:37

解决方案1
1 2017-11-13 16:42:14

解决方案2
-1 2017-11-13 16:52:37