ドロップダウンメニューで選択したオプションに基づいて別のドロップダウンを作成する

Question

ドロップダウンを作成するには、「Choose Gender」、「Male？」、「Female」という3つのオプションがあります。私が知りたいのは、オスが選択されたときに、「あなたのレースを選んでください！」、「ヒューマン」、「ドワーフ」、「オルク」のオプションで新しいドロップダウンメニューが作成されるようにする方法です。私が今やっていることはうまくいかないようです。私は私がこれまで持っている何の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」ドロップダウンのオプションを作成するときは、各オブジェクトにイベントをアタッチします。それを行うには、いくつかの方法がありますが、私の推薦は次のようになります。

someFunctionは、ドロップダウンのあなたの次のレベルを生成

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

。 「addEventListenerをの内のステートメントを実行する方法と考える、

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

言い訳空想表記： は今、あなたはおそらく、あなたがこのような無名関数を使用することができますので、その次の関数にはいくつかの情報に沿って通過したいです直接関数を与えるのではなく、これで、あなたは好きなだけ深く巣を作り、関連するすべての情報を渡すことができます。この入れ子の最後のレベルは、それに沿って渡される情報に基づいて何らかのアクションを実行できます。

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

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

コード例：if文の束を使用して

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

は多分これを行うための最善の方法はありませんが、あなたはオプションの数が少ない場合には、意志仕事を成し遂げます。また、 "var"の代わりに "let"を使って私に気づいたかもしれません。これは、このタイプのネスティングでは重要であるかもしれないし、重要でないかもしれない、私は長い間jsを書いていないので、わからない。私はわかりやすく描写されているわけではないが、あなたはヒントを求めた。