how to do two dependent drop down using javascript and html?-CodePudding

Second dropdown shows 0,1,2 instead of html,css,js Can u help how to display these (html,css,js) in code. I tried doing multiple things but couldnt get solution to this. Is it the mistake with html or the script involvced in it . I basically changed this from w3 schools three dropdown code to two, but it doesnt seem to work

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
    var subjectObject = {
      "Front-end": [
        "HTML",
        "CSS",
        "JavaScript"    
      ],
      "Back-end": [
        "PHP",
        "SQL"]
      
    }
    window.onload = function() {
      var subjectSel = document.getElementById("subject");
      var topicSel = document.getElementById("topic");
     
      for (var x in subjectObject) {
        subjectSel.options[subjectSel.options.length] = new Option(x, x);
      }
      subjectSel.onchange = function() {
        //empty Chapters- and Topics- dropdowns
        chapterSel.length = 1;
        topicSel.length = 1;
        //display correct values
        for (var y in subjectObject[this.value]) {
          topicSel.options[topicSel.options.length] = new Option(y, y);
        }
      }
      
    }
    </script>
    </head>   
    <body>

    <h1>Cascading Dropdown Example</h1>

    <form name="form1" id="form1" action="/action_page.php">
    Subjects: <select name="subject" id="subject">
        <option value="" selected="selected">Select subject</option>
      </select>
      <br><br>
    Topics: <select name="topic" id="topic">
        <option value="" selected="selected">Please select subject first</option>
      </select>
      <br><br>

    </form>

    </body>
    </html>

var subjectObject = {
      "Front-end": [
        "HTML",
        "CSS",
        "JavaScript"    
      ],
      "Back-end": [
        "PHP",
        "SQL"]
      
    }
    window.onload = function() {
      var subjectSel = document.getElementById("subject");
      var topicSel = document.getElementById("topic");
     
      for (var x in subjectObject) {
        subjectSel.options[subjectSel.options.length] = new Option(x, x);
      }
      subjectSel.onchange = function() {
        //empty Chapters- and Topics- dropdowns
        
        topicSel.length = 1;
        //display correct values
        for (var y in subjectObject[this.value]) {
          topicSel.options[topicSel.options.length] = new Option(y, y);
        }
      }
      
    }
    </script>
    </head>   
    <body>

    <h1>Cascading Dropdown Example</h1>

    <form name="form1" id="form1" action="/action_page.php">
    Subjects: <select name="subject" id="subject">
        <option value="" selected="selected">Select subject</option>
      </select>
      <br><br>
    Topics: <select name="topic" id="topic">
        <option value="" selected="selected">Please select subject first</option>
      </select>
      <br><br>

    </form>

    </body>
    </html>

<!-- end snippet -->

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
var subjectObject = {
  "Front-end": [
    "HTML",
    "CSS",
    "JavaScript"    
  ],
  "Back-end": [
    "PHP",
    "SQL"]
  
}
window.onload = function() {
  var subjectSel = document.getElementById("subject");
  var topicSel = document.getElementById("topic");
 
  for (var x in subjectObject) {
    subjectSel.options[subjectSel.options.length] = new Option(x, x);
  }
  subjectSel.onchange = function() {
    //empty Chapters- and Topics- dropdowns
    chapterSel.length = 1;
    topicSel.length = 1;
    //display correct values
    for (var y in subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  
}
</script>
</head>   
<body>
<h1>Cascading Dropdown Example</h1>
<form name="form1" id="form1" action="/action_page.php">
Subjects: <select name="subject" id="subject">
    <option value="" selected="selected">Select subject</option>
  </select>
Topics: <select name="topic" id="topic">
    <option value="" selected="selected">Please select subject first</option>
  </select>

</form>

CodePudding user response：

The problem that you are having is you are treating your array and object loops the same.

subjectObject is an object, that has the subjects as the keys. subjectObject[subject] is an array, that will have numerical keys.

I updated your code by:

referring to: subjectObject[this.value][y] so that it refers to the string value of that array element and not its position in the array.

Plus just to simplify your code, I used appendChild to add the options as new option returns a value that can be used via appendChild.

Also, in one of your snippets you are referring to chapterSel but no where are you declaring it.

var subjectObject = {
  "Front-end": [
    "HTML",
    "CSS",
    "JavaScript"
  ],
  "Back-end": [
    "PHP",
    "SQL"
  ]

}
window.onload = function() {
  var subjectSel = document.getElementById("subject");
  var topicSel = document.getElementById("topic");
  
  for (var x in subjectObject) {
    subjectSel.appendChild(new Option(x, x));
  }
  subjectSel.onchange = function() {    //empty Chapters- and Topics- dropdowns
       
    //subjectSel.length = 1;   
    topicSel.length = 1;
    //display correct values
    for (var y in subjectObject[this.value]) {
      topicSel.appendChild(new Option(subjectObject[this.value][y],y));
    }
  }

}

<h1>Cascading Dropdown Example</h1>

<form name="form1" id="form1" action="/action_page.php">
  Subjects:
  <select name="subject" id="subject">
    <option value="" selected="selected">Select subject</option>
  </select>
  <br><br> Topics:
  <select name="topic" id="topic">
    <option value="" selected="selected">Please select subject first</option>
  </select>
  <br><br>

</form>

CodePudding user response：

Simple, you are using the index for both values, instead you should use the index to grab the value from the array - use it as the array's index again:

Also, use the .add() function of a select to more easily add options.

Finally, I created a holder variable to reset the select to the "please select a subject" so you can remove it entirely when that IS selected - less confusing UI for the user.

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
    var subjectObject = {
      "Front-end": [
        "HTML",
        "CSS",
        "JavaScript"    
      ],
      "Back-end": [
        "PHP",
        "SQL"]
      
    },
    topicDefaultOption = new Option("Please select subject first", "");
    
    window.onload = function() {
      var subjectSel = document.getElementById("subject");
      var topicSel = document.getElementById("topic");
     
      for (var x in subjectObject) {
        subjectSel.options[subjectSel.options.length] = new Option(x, x);
      }
      subjectSel.onchange = function() {
        //empty Chapters- and Topics- dropdowns
        topicSel.length = 0;
        //chapterSel.length = 1; //not found :(
        
        if(subjectSel.value === "") {
          topicSel.options.add(topicDefaultOption);
        } else {        
          //display correct values
          for (var y in subjectObject[this.value]) {
            topicSel.options.add(new Option(subjectObject[this.value][y], y));
          }
        }
      }
      
    }
    </script>
    </head>   
    <body>

    <h1>Cascading Dropdown Example</h1>

    <form name="form1" id="form1" action="/action_page.php">
    Subjects: <select name="subject" id="subject">
        <option value="" selected="selected">Select subject</option>
      </select>
      <br><br>
    Topics: <select name="topic" id="topic">
        <option value="" selected="selected">Please select subject first</option>
      </select>
      <br><br>

    </form>

    </body>
    </html>