別のダイナミックドロップダウンの値に基づいてダイナミックドロップダウンを作成するにはどうすればよいですか？

Question

私はドロップダウンを持っています、私はオプションを選択すると、それは動的なドロップダウンを作成します。ここまでは順調ですね。

しかし、もう1つのダイナミックドロップダウンを作成して、他のダイナミックドロップダウンの値に基づいています。どうしたらいいですか？

動的変数「div」に静的IDがないため、最初の動的ドロップダウンが機能します.2番目の動的ドロップダウンが機能しません。誰かが私の問題を解決するのを助けることができますか？ここで

はコードです：

<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

気付いたとおり、onchange="displayMenus2()"をHTMLに設定しないでください：動作しません。これはIDのためではなく、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>