Javascript Cascading Dropdowns

useri7Gk 0
Viewed 45

I am trying to create a cascading drop down using JavaScript. I'm new to JavaScript. Below script is kind of working but not producing result I am looking for. with current script when I select "VM Size", CPU field is showing all category(cpu/memory/disk) and then next field showing list of cpu size or memory size for that category.

What I am trying to achieve here is when I select VM Size all other field will only have drop down option of cpu/memory/disk size for that specific VM size.

ex. VM Size: Medium CPU: 2cpu Memory: 8GB 16GB Disk: 50GB 100GB 200GB

var vmObject = {
    "Small": {
        "CPU": ["1CPU"],
        "Memory": [".5GB", "1GB", "3.5GB"],
        "Disk": ["50GB", "100GB", "200GB"]
    },
    "Medium": {
        "CPU": ["2CPU"],
        "Memory": ["8GB", "16GB"],
        "Disk": ["50GB", "100GB", "200GB"]
    }
  }

  window.onload = function() {
    var vmSel = document.getElementById("vmSize");
    var cpuSel = document.getElementById("cpuSize");
    var memorySel = document.getElementById("memSize");
    var diskSel  = document.getElementById("diskSize");
    for (var x in vmObject) {
      vmSel.options[vmSel.options.length] = new Option(x, x);
    }

    vmSel.onchange = function() {
      //empty Chapters- and Topics- dropdowns
      memorySel.length = 1;
      cpuSel.length = 1;
      //display correct values
      for (var y in vmObject[this.value]) {
        cpuSel.options[cpuSel.options.length] = new Option(y, y);
      }
    }

    cpuSel.onchange = function() {
      //empty Chapters dropdown
      memorySel.length = 1;
      //display correct values
      var z = vmObject[vmSel.value][this.value];
      for (var i = 0; i < z.length; i++) {
        memorySel.options[memorySel.options.length] = new Option(z[i], z[i]);
      }
    }

  }
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src='script.js'></script>
</head>   
<body>

<h1>Compute Dropdown Example</h1>

<form name="form1" id="form1">
VM Size: <select name="vmSize" id="vmSize">
    <option value="" selected="selected">Select VM Size</option>
  </select>
  <br><br>
CPU: <select name="cpuSize" id="cpuSize">
    <option value="" selected="selected">Please select VM size first</option>
  </select>
  <br><br>
Memory: <select name="memSize" id="memSize">
    <option value="" selected="selected">Please select VM size first</option>
  </select>
  <br><br>
Disk: <select name="diskSize" id="diskSize">
    <option value="" selected="selected">Please select VM size first</option>
  </select>
  <br><br>
</form>

</body>
</html>

object arrays javascript html
2 Answers

You can use vmObject[this.value][y] to get each array value from CPU, Memory, and Disk and then populate data to select elements by forEach.

var vmObject = {
    "Small": {
        "CPU": ["1CPU"],
        "Memory": [".5GB", "1GB", "3.5GB"],
        "Disk": ["50GB", "100GB", "200GB"]
    },
    "Medium": {
        "CPU": ["2CPU"],
        "Memory": ["8GB", "16GB"],
        "Disk": ["50GB", "100GB", "200GB"]
    }
  }

  window.onload = function() {
    var vmSel = document.getElementById("vmSize");
    var cpuSel = document.getElementById("cpuSize");
    var memorySel = document.getElementById("memSize");
    var diskSel  = document.getElementById("diskSize");
    for (var x in vmObject) {
      vmSel.options[vmSel.options.length] = new Option(x, x);
    }

    vmSel.onchange = function() {
      //empty Chapters- and Topics- dropdowns
      memorySel.length = 1;
      cpuSel.length = 1;
      diskSel.length = 1;
      //display correct values
      for (var y in vmObject[this.value]) {
        switch(y) {
           case "CPU": vmObject[this.value][y].forEach(x => cpuSel.options[cpuSel.options.length] = new Option(x, x)); break;
           case "Memory": vmObject[this.value][y].forEach(x => memorySel.options[memorySel.options.length] = new Option(x, x)); break;
           case "Disk": vmObject[this.value][y].forEach(x => diskSel.options[diskSel.options.length] = new Option(x, x)); break;
        }
      }
    }

  }
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src='script.js'></script>
</head>   
<body>

<h1>Compute Dropdown Example</h1>

<form name="form1" id="form1">
VM Size: <select name="vmSize" id="vmSize">
    <option value="" selected="selected">Select VM Size</option>
  </select>
  <br><br>
CPU: <select name="cpuSize" id="cpuSize">
    <option value="" selected="selected">Please select VM size first</option>
  </select>
  <br><br>
Memory: <select name="memSize" id="memSize">
    <option value="" selected="selected">Please select VM size first</option>
  </select>
  <br><br>
Disk: <select name="diskSize" id="diskSize">
    <option value="" selected="selected">Please select VM size first</option>
  </select>
  <br><br>
</form>

</body>
</html>

Nick Vu0

You didn't use the values of each part's array individually. Here is a modular way of populating part selects.

var vmObject = {
    "Small": {
        "CPU": ["1CPU"],
        "Memory": [".5GB", "1GB", "3.5GB"],
        "Disk": ["50GB", "100GB", "200GB"]
    },
    "Medium": {
        "CPU": ["2CPU"],
        "Memory": ["8GB", "16GB"],
        "Disk": ["50GB", "100GB", "200GB"]
    }
  }

  window.onload = function() {
    let selects = {
     vm: document.getElementById("vmSize"),
     CPU: document.getElementById("cpuSize"),
     Memory: document.getElementById("memSize"),
     Disk: document.getElementById("diskSize")
    }
    
    Object.keys(vmObject).forEach((value, i) => {
      selects['vm'].options[i+1] = new Option(value, value);
    })
    
    selects['vm'].onchange = function() {
      let vm = vmObject[this.value]
      Object.keys(vm).forEach(value => {
        selects[value].length = 1
        let part = vm[value]
        part.forEach((partName, i) => {
          selects[value].options[i+1] = new Option(partName, partName);
        });
      })
    }
  }
<h1>Compute Dropdown Example</h1>

<form name="form1" id="form1">
VM Size: <select name="vmSize" id="vmSize">
    <option value="" selected="selected">Select VM Size</option>
  </select>
  <br><br>
CPU: <select name="cpuSize" id="cpuSize">
    <option value="" selected="selected">Please select VM size first</option>
  </select>
  <br><br>
Memory: <select name="memSize" id="memSize">
    <option value="" selected="selected">Please select VM size first</option>
  </select>
  <br><br>
Disk: <select name="diskSize" id="diskSize">
    <option value="" selected="selected">Please select VM size first</option>
  </select>
  <br><br>
</form>

BehRouz0
Related