Question

我创建了一个下拉列表，它从一个有三个选项“选择性别”“男性？”，“女性”开始。我想知道的是如何使它成为当选择男性时，会创建一个新的下拉菜单，其中包含“选择你的种族！”，“人类”，“矮人”，“兽人”的选项。我现在在做什么似乎不起作用。我必须使用JavaScript（而不是JQuery）

到目前为止我所拥有的：

var step1 = ["Choose Gender?", "Male", "Female"];
var step2 = [["Choose your race!", "Human", "Dwarf", "Orc"],["Choose your race!", "Elf", "Dwarf"]];
var step3 = [["Human Class", "Warrior", "Sorcerer", "Theif"], ["Elf Class", "Cleric", "Necromancer", "Priest"], ["Dwarf Class", "Cannonner", "Rifelman", "Engineer"], ["Orc Class", "Beserker","Warlock", "Shaman"]];

function init() {
    menuCreate(step1);
    if (selectValue == step1[1]){

        menuCreate(step2);

    }
}
function menuCreate(step2){
    //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< step2.length; i++){
        var option = document.createElement('option');
        option.value = step2[i];
        option.text = step2[i];
        selectForm.appendChild(option);

    }



} // end menuCreate()

function getSelectValue(){
    var selectValue = document.getElementById("form").value;

}

任何帮助将不胜感激！即使它只是一个开始的暗示！我是JavaScript的新手。必须在JavaScript中动态创建所有选择。我也不允许使用innerhtml / innertext，下拉需要使用JS动态创建

Answer 1

您可以按标签名称获取body元素，并添加到innerHTML以创建更多HTML元素，如我的JSFiddle代码所示： https://jsfiddle.net/qx9cwnuk/

function create() {
    var name = document.getElementById('s1').value;
  document.getElementById('d1').innerHTML = "You selected " + name + "<br/><select><option>Option 1</option><option>Option 2</option><option>Option 3</option></select>";
}
<select id="s1">
  <option value="male">Male</option>
  <option value="female">Female</option>
  <option value="orc">Orc</option>
</select>
<button onclick="create()">Select</button><br/>
<div id="d1"></div>

Answer 2

如果你使用事件，你可以用更简洁的方式做到这一点。为“step1”下拉列表创建选项时，请将事件附加到每个对象。有几种方法可以做到这一点，我的建议是：

option.addEventListener("click", <someFunction>);

其中someFunction会生成下一级下拉列表。现在您可能希望将一些信息传递给下一个函数，以便您可以使用这样的匿名函数：

option.addEventListener("click", () => {
    someFunction(option.value, otherUsefulInformation);
});

请原谅这种花哨的符号，将其视为在“addEventListener”中执行语句而不是直接赋予函数的方法。现在，您可以根据需要深入嵌套，并传递所有相关信息。此嵌套的最后一级可以根据传递给它的信息执行某些操作。

https://www.w3schools.com/js/js_htmldom_eventlistener.asp

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

代码示例：

generateLevel1(optionsArray){
    for(<each element in optionsArray){
        let option = <new dom element>
        <do customization and stuff to option>
        option.addEventListener("click", () => {
            // the following statements will be executed when this option is clicked
            if(option == male)
                generateLevel2(nextOptionsArray);
            if(option == female)
                generateLevel2(otherNextOptionsArray);
        }
    }
}

使用一堆if语句可能不是最好的方法，但如果你有少量选项，它将完成工作。你也许会注意到我使用“let”而不是“var”。这种类型的嵌套可能有也可能不重要，我没有在很长一段时间内写过js所以我不知道。我知道我不是超级描述性的，但你只是要求提示。

根据下拉菜单中选择的选项创建另一个下拉菜单

2 个答案: