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

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()"，正如您注意到的那样：它不起作用。这不是因为身份证，而是因为它设置在div和div没有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>