Cascade dropdown using JS not working

I had created cascading parent-child select-boxes using AngularJS, but since you are using NativeJS, I tried to re-create using JS. The pre-requisite of my solution is a well-defined JSON based on which the select-boxes will be created. You'll have to create the JSON on server side or manually or wherever you are creating the select-box data. Below is the JSON format.:

Every select-box is a named object with following properties:

1. Parent Attribute: Name of object which is the parent of this select-box object.

2. Options: Array of option objects, where each object contains: (a) Option Value (b) Parent Option Value - The parent select-box value with which the current value is mapped. (c) Option ID.

3. Selected Option: An object with two properties: (a) Currently selected value (b) ID of currently selected value.

Here is the working Plunker of the solution. Hope it helps.

----- EDIT: -----

On request of @User014019

Here is the another version of this drop-down solution where all the options in all select-boxes are visible initially, and parent-child relationships are set when user select a particular value.

Below is the code:

// reads the data and creates the DOM elements (select-boxes and their relevant options)
function initSelect(data) {
  var select, option, input, filteredOptions;
  for (var key in data) {
    select = document.createElement("select");
    select.name = key;
    container.appendChild(select);
    filteredOptions = optionFilter(data[key].availableOptions, data[data[key].parent], data[key]);
    input = document.querySelector('select[name="' + key + '"');
    input.setAttribute("onchange", "updateSelect(this)");
    for (var i = 0; i < filteredOptions.length; i++) {
      option = document.createElement("option");
      option.value = filteredOptions[i].value;
      option.innerHTML = filteredOptions[i].value;
      input.appendChild(option);
    }
    input.options.selectedIndex = getSelectedIndex(filteredOptions, data[key]);
    input.setAttribute('model', data[key].selectedOption.value);
  }
}


// this function will be called on change of select-box
function updateSelect(element) {
  var input, option;
  setSelectedOption(element);
  for (var key in data) {
    filteredOptions = optionFilter(data[key].availableOptions, data[data[key].parent], data[key]);
    input = document.querySelector('select[name="' + key + '"');
    while (input.firstChild) {
      input.removeChild(input.firstChild);
    }
    for (var i = 0; i < filteredOptions.length; i++) {
      option = document.createElement("option");
      option.value = filteredOptions[i].value;
      option.innerHTML = filteredOptions[i].value;
      input.appendChild(option);
    }
    input.options.selectedIndex = getSelectedIndex(filteredOptions, data[key]);
    input.setAttribute('model', data[key].selectedOption.value);
  }
}

// set the selected-option of select-box when it's changed
function setSelectedOption(element) {
  var inputName = element.getAttribute("name");
  var inputValue = getSelectedText(element);
  var inputItem = data[inputName];
  var selectedOption, filteredOptions;

  // setting selected option of changed select-box
  for (var i = 0; i < inputItem.availableOptions.length; i++) {
    if (inputValue === inputItem.availableOptions[i].value) {
      inputItem.selectedOption = inputItem.availableOptions[i];
      break;
    }
  }
  // setting child object selected option now
  for (var key in data) {
    if (data[key].parent === inputName) {
      filteredOptions = optionFilter(data[key].availableOptions, data[data[key].parent], data[key]);
      data[key].selectedOption = filteredOptions[0];
    }
  }
}

// get the text of select-box
function getSelectedText(element) {
  if (element.selectedIndex == -1) {
    return null;
  }
  return element.options[element.selectedIndex].text;
}

function getSelectedIndex(options, self) {
  var index;
  for (var i = 0; i < options.length; i++) {
    if (self.selectedOption.value === options[i].value) {
      index = i;
      break;
    }
  }
  return index;
}

// get filtered options based on parent's selected value
function optionFilter(items, parent, self) {
  var result = [];
  if (typeof parent !== "undefined") {
    for (var i = 0; i < items.length; i++) {
      if (typeof parent.selectedOption !== "undefined") {
        if (parent.selectedOption !== null && items[i].parentValue === parent.selectedOption.value) {
          result.push(items[i]);
        }
      }
    }
    if (typeof self.selectedOption === "undefined") {
      self.selectedOption = null;
    }
    if (self.selectedOption === null) {
      self.selectedOption = result[0];
    }
    return result;
  } else {
    return items;
  }
}