如何根据另一个动态下拉列表的值创建动态下拉列表？ [英] 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 dynamic dropdown. How can I do it?
第一个动态下拉列表有效，我猜第二个动态下拉列表不起作用，因为动态变量div没有静态ID。有人可以帮我解决我的问题吗？
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?
这是代码：
<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：
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>
推荐答案
不要设置 onchange = HTML中的displayMenus2（），正如您所注意到的：它不起作用。这不是因为id，而是因为它设置在 div 而 div s没有 onchange events。
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.
相反，您应该在创建新下拉菜单时在JavaScript中设置它。
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);
更新
好吧，看来你好吗想要更多:)允许我完全重写你的代码。最重要的是，我将所有选择的选项都放入JavaScript中。这样更有意义，更易于管理。
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>
这篇关于如何根据另一个动态下拉列表的值创建动态下拉列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
