如何根據另一個動態下拉列表的值創建動態下拉列表？

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>