动态下拉菜单不会根据选择创建

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来做这个问题，当我在第二个菜单上选择“Human”时，我应该得到另一个使用step3 [0]的菜单。

Answer 1

在menuCreate函数中， id属性为select元素：selectForm.id = "form";。在第二次调用它之后（第二步），在文档中有两个具有相同ID的元素。然后，当您尝试在maleRace函数document.getElementById("form"); down.onchange = function(event){上添加onchange事件处理程序时，您实际上将此处理程序附加到第一个select元素（性别一）而不是第二个元素。

解决此问题的一个好方法是将menuCreate函数添加到第二个参数中，如下所示：function menuCreate(step1, id){。然后，将这一行从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