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 menu
var 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 data
var options = {
  Modules: {
    BovietModule: "description",
    HanwhaQCellModule: "some other"
  },

  microinverters: {
    EnphaseMicroInverters: "hello"
  },

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

  nothing: "no subtype"
}

// create new select menues
function createSelect(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 in from) {
    option = document.createElement("option")
    option.text = option.value = item
    newDropdown.add(option)
  }
  
  return newDropdown
}

// init
var mainSelect = createSelect(options)
main.appendChild( mainSelect )
mainSelect.onchange = function() {
  // remove all subtypes
  while (subtype.firstChild) subtype.removeChild(subtype.firstChild)
  description.innerText = ''

  // add new one
  if(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>
    <td colspan="4" align="center" bgcolor="#FF8000">
      <h2>Inventory Request</h2></td>
  </tr>
  <tr>
    <td colspan="4" bgcolor="#D8D8D8" style="height: 20;"></td>
  </tr>
  <tr>
    
    <td align="center" bgcolor="#D8D8D8"><b>Name (type)</b></td>
    <td align="center" bgcolor="#D8D8D8"><b>Subtype</b></td>
    <td align="center" bgcolor="#D8D8D8"><b>Description</b></td>
    <td align="center" bgcolor="#FFFF00"><b>Quantity</b></td>
    
  </tr>
  <tr>

    <td bgcolor="#D8D8D8" id="main"></td>
    <td bgcolor="#D8D8D8" id="subtype"></td>
    <td bgcolor="#D8D8D8" id="description"></td>

    <td><input type="number" id="quantity" /></td>

  </tr>
</table>