Question

我已经编写了以下用于创建下拉列表的代码。 研究区域的列表工作正常但与该研究区域相对应，第二个列表即选择教授，其中应显示 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>

Answer 1

您有一个拼写错误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); } }条件

＆＃13;

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

＆＃13;

tableView(_:, cellForRowAt:)

＆＃13;

Answer 2

使用... s2.appendChild（newOption）; 代替 s2.options.add（newOption）;

下拉列表的Javascript代码无法正常工作

2 个答案: