Dependent Dropdown not working in Javascript

Question

I am using HTML & javascript to get the dependent dropdowns. But not able to get the expected results. Can anyone help me out & reviews my code?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
var typeObject = {
  "1": {
    "a",
    "b",
    "c"
  },
  
  "2": {
    "d",
    "e",
    "f",
    "g",
    "h"
  }
}
window.onload = function() {
  var typeSel = document.getElementById("Type");
  var caseReasonSel = document.getElementById("Case_Reason");
  
  for (var x in typeObject) {
    typeSel.options[typeSel.options.length] = new Option(x, x);
  }
  
typeSel.onchange = function() {

    caseReasonSel.length = 1;
    var y = typeObject[typeSel.value][this.value];
    for (var i = 0; i < y.length; i++) {
      typeSel.options[typeSel.options.length] = new Option(y[i], y[i]);
    }
  
}
</script>
</head>   
<body>

<h1>Cascading Dropdown Examples</h1>

<form name="form1" id="form1" action="/action_page.php">
Type: <select name="Type" id="Type">
    <option value="" selected="selected">None</option>
  </select>
  <br><br>
Case Reason: <select name="Case_Reason" id="Case_Reason">
    <option value="" selected="selected">None</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">  
</form>

</body>
</html>

I expect that if I select the value "1" from Type dropdown field, I should get the values "a,b,c" in Case Reason dropdown field. And if I select the value "2" from Type dropdown field, I should get the values "d,e,f,g,h" in Case Reason dropdown field

Your JS is not valid. Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`), read any errors. Learn about [how to debug small programs](//ericlippert.com/2014/03/05/how-to-debug-small-programs). Try using your browser’s [debug capabilities](//ali-dev.medium.com/how-to-easily-debug-in-javascript-5bac70f94f1a). See [What is a debugger and how can it help me diagnose problems?](/q/25385173/4642212). — Sebastian Simon, Nov 01 '22 at 08:14

score 0 · Answer 1 · answered Nov 01 '22 at 08:30

The JS wasn't valid. I tried to guess what you want and fixed it up a little, although still maybe an issue or 2. I changed typeObject so that it has an array of values and changed a few other things. Look it over and see what else could be fixed.

You might want to learn how to use JSFiddle or the SO code snippets so you can test your code.

// options for type, with array of cases for each type
var typeObject = {
    "1": ["a", "b", "c"],
    "2": ["d", "e", "f", "g", "h"]
}
// initialize on load
window.onload = function() {
    var typeSel = document.getElementById("Type");
    var caseReasonSel = document.getElementById("Case_Reason");
    // Setup of typeSel by appending the option key/name
    for (var x in typeObject) {
        typeSel.options[typeSel.options.length] = new Option(x, x);
    }
    // Populate
    typeSel.onchange = function() {

        caseReasonSel.length = 1;
        var y = typeObject[typeSel.value];
        for (var i = 0; i < y.length; i++) {
            caseReasonSel.options[caseReasonSel.options.length] = new Option(y[i], y[i]);
        }
    }
}

<h1>Cascading Dropdown Examples</h1>

<form name="form1" id="form1" action="/action_page.php">
Type: <select name="Type" id="Type">
    <option value="" selected="selected">None</option>
  </select>
  <br><br>
Case Reason: <select name="Case_Reason" id="Case_Reason">
    <option value="" selected="selected">None</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">  
</form>

Dependent Dropdown not working in Javascript

1 Answers1