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的元素。然后，当您尝试在onchange函数 - maleRace上添加document.getElementById("form"); down.onchange = function(event){事件处理程序时，您实际将此处理程序附加到第一个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");

您可以查看此代码集：https://codepen.io/anon/pen/xXJwBv?editors=1011

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

1 个答案: