Home > Net >  how to do two dependent drop down using javascript and html?
how to do two dependent drop down using javascript and html?

Time:08-25

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>

  • Related