How to create a cascading Dropdown List of 2?-CodePudding

I don't know what else to do. I want to Create a set of cascading select lists, where the selection of an item from the first list determines which list to display in the second list.I would like to know how to do it if someone could give me a clearer explanation please

let data = [
    { item: 'Fruits', subitems: ['apple', 'banana', 'pineapple', 'watermelon'] },
    { item: 'Meals', subitems: ['chicken', 'bacon', 'pork', 'beef'] },
    { item: 'Animals', subitems: ['cat', 'rabbit', 'mouse', 'lion'] },
    {
      item: 'Brands Laptops',
      subitems: ['Dell', 'HP', 'Apple', 'Sony'],
    },
  ];


  window.onload = function() {
  var itemSel = document.getElementById("item");
  var subitemSel = document.getElementById("subitems");

  for (var x in data) {
    itemSel.options[itemSel.options.length] = new Option(x, x);
  }
  itemSel.onchange = function() {
  //empty 
  subitemSel.length = 1;
    //display correct values
    for (var y in itemObject[this.value]) {
      subitemSel.options[subitemSel.options.length] = new Option(y, y);
    }
  }
}

<!DOCTYPE html>
<html lang="en-CA">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script defer type="module" src="./js/main.js"></script>
</head>
<body>
    <header>
      <h1>Moshe Brito</h1>
      <h2>41088278</h2>
    </header>
    <main>
      <!-- content will be built here by javascript -->
      <div>
        <label for="first">First List</label>
        <select id="first" name="first">
          <option value="" selected="selected">Please select first</option>
        </select>
      </div>
      <div>
        <label for="second">Second List</label>
        <select id="second" name="second">
          <option value="" selected="selected">Please select second</option>
        </select>
      </div>
    </main>
</body>
</html>

CodePudding user response：

You use invalid value for getElementById().
Those must refer to real HTML id attribute but you refer all of them to not exists.
The result in console showing error TypeError: itemSel is null.

The select text in Option() is in first argument. See reference.
If you use just x in data then x will be index number. It is okay to use it in value attribute but select text should be readable. So, it should be data[x].item in the first Option() argument.

Now go to inside the onchange event. You use undeclared itemObject variable and when first select box has been changed, it will be error here.
This variable must be replace with data[this.value].subitems if you want to list sub items property.

Full code.

let data = [{
    item: 'Fruits',
    subitems: ['apple', 'banana', 'pineapple', 'watermelon']
  },
  {
    item: 'Meals',
    subitems: ['chicken', 'bacon', 'pork', 'beef']
  },
  {
    item: 'Animals',
    subitems: ['cat', 'rabbit', 'mouse', 'lion']
  },
  {
    item: 'Brands Laptops',
    subitems: ['Dell', 'HP', 'Apple', 'Sony'],
  },
];


window.onload = function() {
  var itemSel = document.getElementById("first");
  var subitemSel = document.getElementById("second");

  for (var x in data) {
    itemSel.options[itemSel.options.length] = new Option(data[x].item, x);
  }
  itemSel.onchange = function() {
    //empty 
    subitemSel.length = 1;
    //display correct values
    for (var y of data[this.value].subitems) {
      subitemSel.options[subitemSel.options.length] = new Option(y, y);
    }
  }
}

<header>
  <h1>Moshe Brito</h1>
  <h2>41088278</h2>
</header>
<main>
  <!-- content will be built here by javascript -->
  <div>
    <label for="first">First List</label>
    <select id="first" name="first">
      <option value="" selected="selected">Please select first</option>
    </select>
  </div>
  <div>
    <label for="second">Second List</label>
    <select id="second" name="second">
      <option value="" selected="selected">Please select second</option>
    </select>
  </div>
</main>