How To Create A Dynamic Dropdown Based On Values Of Another Dynamic Dropdown?

I have a dropdown, when I select an option it creates a dynamic dropdown. So far, so good. But I want to create another dynamic dropdown, now based on the values of the other dynam

Solution 1:

Don't set onchange="displayMenus2()" in the HTML, as you noticed: it doesn't work. This is not because of the id but because it's set on a div and divs don't have onchange events.

Instead, you should set it in the JavaScript when you create your new drop-down.

//Create the new dropdown menuvar whereToPut = document.getElementById('myDiv');
var newDropdown = document.createElement('select');
newDropdown.setAttribute('id',"newDropdownMenu");

newDropdown.onchange = displayMenus2; // <-- add the listener like this

whereToPut.appendChild(newDropdown);

update

okay, it seems you want more :) allow me to rewrite your code completely. Most importantly I put all your select options into JavaScript. It makes more sense like this and is more easily manageable.

Now doing something like this, you could build a recursive loop and all, but as I don't really know much about your data I wrote this simple approach. I hope you understand it. Be sure to leave any questions.

// the datavar options = {
  Modules: {
    BovietModule: "description",
    HanwhaQCellModule: "some other"
  },

  microinverters: {
    EnphaseMicroInverters: "hello"
  },

  subtype: {
    "make spaces like this": "hi again"
  },

  nothing: "no subtype"
}

// create new select menuesfunctioncreateSelect(from) {
  var newDropdown = document.createElement("select")
  
  var option = document.createElement("option")
  option.text = "Seleccione un equipo"
  option.disabled = option.selected = true
  newDropdown.add(option)

  for (var item infrom) {
    option = document.createElement("option")
    option.text = option.value = item
    newDropdown.add(option)
  }
  
  return newDropdown
}

// initvar mainSelect = createSelect(options)
main.appendChild( mainSelect )
mainSelect.onchange = function() {
  // remove all subtypeswhile (subtype.firstChild) subtype.removeChild(subtype.firstChild)
  description.innerText = ''// add new oneif(typeof options[mainSelect.value] == 'string') description.innerText = options[mainSelect.value]
  else {
    var subSelect = createSelect(options[mainSelect.value])
    subtype.appendChild( subSelect )
    subSelect.onchange = function() {
      description.innerText = options[mainSelect.value][subSelect.value]
    }
  }

}

<table><tr><tdcolspan="4"align="center"bgcolor="#FF8000"><h2>Inventory Request</h2></td></tr><tr><tdcolspan="4"bgcolor="#D8D8D8"style="height: 20;"></td></tr><tr><tdalign="center"bgcolor="#D8D8D8"><b>Name (type)</b></td><tdalign="center"bgcolor="#D8D8D8"><b>Subtype</b></td><tdalign="center"bgcolor="#D8D8D8"><b>Description</b></td><tdalign="center"bgcolor="#FFFF00"><b>Quantity</b></td></tr><tr><tdbgcolor="#D8D8D8"id="main"></td><tdbgcolor="#D8D8D8"id="subtype"></td><tdbgcolor="#D8D8D8"id="description"></td><td><inputtype="number"id="quantity" /></td></tr></table>