如何根据另一个动态下拉列表的值创建动态下拉列表？

Question

我有一个下拉菜单，当我选择一个选项时，它会创建一个动态下拉菜单。到目前为止，一切顺利。

但我想创建另一个动态下拉列表，现在基于另一个动态下拉列表的值。我该怎么做？

第一个动态下拉菜单有效，我猜第二个无效，因为动态变量“div”没有静态 ID。有人可以帮我解决我的问题吗？

代码如下：

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

更多选择...

    </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") { 

在所有选项之后...

}

        created = 1

    }

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

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

        d.removeChild(oldmenu);
    }


</script>

Answer 1

不要在 HTML 中设置 onchange="displayMenus2()"，正如您所注意到的：它不起作用。这不是因为 id，而是因为它设置在 div 和 divs 上没有 onchange 事件。

相反，您应该在创建新下拉列表时在 JavaScript 中设置它。

//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);

更新

好的，看来您还想要更多 :) 请允许我完全重写您的代码。最重要的是，我将您所有的选择选项都放入了 JavaScript。这样更有意义，更容易管理。

现在做这样的事情，你可以构建一个递归循环等等，但由于我对你的数据不太了解，所以我写了这个简单的方法。我希望你能理解。请务必留下任何问题。

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