動態下拉菜單不會根據選擇創建

Question

因此，我正在一個項目中創建一個基於第一個選擇的選項而出現的三個下拉菜單。 當我從第一個菜單“男性”或“女性”中選擇時，會出現正確的菜單（例如，當選擇“男性”時，會出現帶有“人”，“矮人”，“獸人”選項的下拉菜單。）之后，我無法使用以前相同的方法根據下一個選擇顯示第三個下拉菜單，這時我很失落。

var step1 = ["Choose Gender?", "Male", "Female"];
var step2 = [["Choose your race!", "Human", "Dwarf", "Orc"],["Choose your race!", "Fairy", "Elf", "Centaur"]];
var step3 = [["Human Class!", "Warrior", "Sorcerer", "Theif"], ["Elf Class!", "Cleric", "Necromancer", "Priest"], ["Dwarf Class!", "Cannonner", "Rifelman", "Engineer"], ["Orc Class!", "Beserker","Warlock", "Shaman"], ["Fairy Class!", "Druid", "Arcanist", "Mystic"]];
function testData(){
    menuCreate(step3[0]);
}
function init() {
    menuCreate(step1);

    var dropdown = document.getElementById("form");
    dropdown.onchange = function(event){    
        if (dropdown.value == "Male"){
            //menuCreate(step2[0]);

                var myDiv = document.getElementById("mainDiv");

                var next = document.createElement('input');
                next.setAttribute('type','button');
                next.setAttribute('value','Next');
                next.setAttribute('onclick','maleRace()');
                myDiv.appendChild(next);
        } else if (dropdown.value == "Female"){
            //menuCreate(step2[1]);

                myDiv = document.getElementById("mainDiv");

                femaleNext = document.createElement('input');
                femaleNext.setAttribute('type','button');
                femaleNext.setAttribute('value','Next');
                femaleNext.setAttribute('onclick','femaleRace()');
                myDiv.appendChild(femaleNext);
        } 

     } 

} // end init()
function menuCreate(step1){
    //console.log(step1);
    var myDiv = document.getElementById("mainDiv");
    var titleElement = document.createElement("h1");

    titleElement.setAttribute('style','color:white');
    titleElement.setAttribute('id','guide');

    var selectForm = document.createElement('select');

    selectForm.id = "form";
    myDiv.appendChild(selectForm);

    for (var i=0; i< step1.length; i++){
        var option = document.createElement('option');
        option.value = step1[i];
        option.text = step1[i];
        selectForm.appendChild(option);

    }






} // end menuCreate()

function maleRace(){
    menuCreate(step2[0]);

    var down = document.getElementById("form");
        down.onchange = function(event){
        if (down.value == "Human"){
                menuCreate(step3[0]);
                var div = document.createElement("div");

                var next = document.createElement('input');
                next.setAttribute('type','button');
                next.setAttribute('value','Next');
                next.setAttribute('onclick','maleRace()');
                div.appendChild(next);
        }

    }
} // end maleRace()

請注意，我不能使用JQUERY或innerHTML / innerText。 我必須使用普通的JavaScript來執行此操作，問題是當我在第二個菜單上選擇“人類”時，應該獲得另一個使用step3 [0]的菜單。

Answer 1

在menuCreate函數中，您要為select元素設置id屬性： selectForm.id = "form"; 。 第二次調用（第二步）之后，文檔中有兩個具有相同ID的元素。 然后，當您嘗試在maleRace函數上添加onchange事件處理程序時maleRace document.getElementById("form"); down.onchange = function(event){ document.getElementById("form"); down.onchange = function(event){您實際上將此處理程序附加到第一個select元素（性別），而不是第二個。

解決此問題的一種好方法是在menuCreate函數中添加第二個參數，例如： function menuCreate(step1, id){ 。 然后，從selectForm.id = "form";稍微更改此行selectForm.id = "form"; 選擇selectForm.id = id; 。

然后，將對createMenu函數的每個調用更改為具有自己的ID：

function init() {
    menuCreate(step1, 'step1form');
    var dropdown = document.getElementById("step1form");


function maleRace(){
    menuCreate(step2[0], 'step2form');
    var down = document.getElementById("step2form");

您可以檢出此Codepen： https ://codepen.io/anon/pen/xXJwBv ? editors = 1011