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

Question

I have a drop down being created, it starts with one that has three options "Choose Gender" "Male?", "Female". What I want to know is how to make it so that when male is selected, a new drop down menu is created with the options of "Choose your race!", "Human", "Dwarf", "Orc". What I am doing now does not seem to work. I have to use JavaScript (not JQuery)

What I have so far:

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;

}

Any help would be greatly appreciated! even if it is just a hint to get started! I am new to JavaScript. All selects have to be dynamically created in JavaScript. I'm also not allowed to use innerhtml/innertext, the drop downs need to be dynamically created using JS

Answer 1

You can get the body element by tag name, and add to the innerHTML of it to create more HTML elements, as shown in my JSFiddle code: 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

You could do this in a slightly neater way if you use make use of events. When you create the options for the "step1" dropdown, attach an event to each of the objects. There are several ways to do that, my recommendation would be:

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

Where someFunction generates your next level of dropdown. Now you probably want to pass along some information to that next function so you could use an anonymous function like this:

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

Excuse the fancy notation, think of it as a way to execute a statement inside of "addEventListener" instead of giving it a function directly. Now you could nest this as deeply as you like and pass along all relevant information. The last level of this nesting could execute some action based on the information passed along to it.

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

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

Code example:

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);
        }
    }
}

Using a bunch of if statements is maybe not the best way to do this but if you have a small number of options it will get the job done. Also you might have noticed me using "let" instead of "var". This may or may not be important in this type of nesting, I haven't written js in a long time so I don't know. I know I'm not being super descriptive but you only asked for a hint.