How to create a dynamic dropdown based on values o

Question

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 dynamic dropdown. How can I do it?

The first dynamic dropdown works, I guess the 2nd one does not work because the dynamic variable "div" does not have a static ID. Can someone help me solving my problem?

Here is the code:

<form name="Inv">
<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">
    <select id="mainMenu" onchange="displayMenus()" size="1">
      <option value="0" id="0">Seleccione un equipo</option>
      <option value="modules" id="mod">Modules</option>
      <option value="microinverters" id="mi">MicroInverters</option>

Many more options...

    </select></td>
    <td bgcolor="#D8D8D8"><div id="myDiv" onchange="displayMenus2()" size="1"></div>
  </td>
  <td bgcolor="#D8D8D8"><div id="myDiv2"></div>
  </td>
  <td><input type="number" id="quantity"/>
  </td>
</tr>
</table>
</form>

JavaScript:

<script type="text/javascript">
var created = 0;

    function displayMenus() {

        if (created == 1) {
            removeDrop();
        }

        //Call mainMenu the main dropdown menu
        var mainMenu = document.getElementById('mainMenu');

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

        if (mainMenu.value == "modules") { 

            //add option
            var optionBovietM=document.createElement("option");
            optionBovietM.text="BovietModule";
            optionBovietM.value="BovietModule";
            newDropdown.add(optionBovietM,newDropdown.options[null]);

            //add option
            var optionHanwhaM=document.createElement("option");
            optionHanwhaM.text="HanwhaQCellModule";
            newDropdown.add(optionHanwhaM,newDropdown.options[null]);


        } else if (mainMenu.value == "microinverters") { 


            var optionEnphaseMI=document.createElement("option");
            optionEnphaseMI.text="EnphaseMicroInverters";
            newDropdown.add(optionEnphaseMI,newDropdown.options[null]);


        } else if (mainMenu.value == "enphase") { 

After all the options...

}

        created = 1

    }

    function removeDrop() {
        var d = document.getElementById('myDiv');

        var oldmenu = document.getElementById('newDropdownMenu');

        d.removeChild(oldmenu);
    }


</script>

Answer 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>