Javascript code for Drop Down List not working properly

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. 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. So there is no need of these if conditions

 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); Instead of s2.options.add(newOption);

Javascript code for Drop Down List not working properly

Question

2 answers

solution1
1 2017-11-13 16:42:14

solution2
-1 2017-11-13 16:52:37

Javascript code for Drop Down List not working properly

Question

2 answers

solution1 1 2017-11-13 16:42:14

solution2 -1 2017-11-13 16:52:37

solution1
1 2017-11-13 16:42:14

solution2
-1 2017-11-13 16:52:37