因此,我正在创建一个项目,该项目会创建三个下拉菜单,这些下拉菜单基于第一个选择的选项显示。当我从第一个菜单中选择“男性”或“女性”时,出现正确的菜单(例如,当选择男性时,下拉选项为“人”,“矮人”,“兽人”)但是,之后,我不能得到第三个下拉菜单出现基于之前,使用同样的方法下一个选择。在这一点上,我很失落。动态下拉菜单不会根据选择创建
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]的菜单。
这工作!谢谢你,你从一个不安分的夜晚救了我! – BrianAndris