根據下拉菜單中選擇的選項創建另一個下拉菜單

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/zh-CN/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了，所以我不知道。 我知道我不是超級描述者，但您只要求提供提示。