更新

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和div s上没有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>

如何根据其他动态下拉列表的值创建动态下拉列表？

1 个答案:

更新