創建另一個下拉基於在下拉菜單中

我有一個下拉創建所選選項，它與一個有三個選項「選擇性別」，「男性開始？」，「女」。我想知道的是如何讓這個被選中的男性時，一個新的下拉菜單與選項創建「選擇你的比賽！」，「人」，「矮人」，「獸人」。我現在所做的似乎並不奏效。我不得不使用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

來源

2017-10-09 BrianAndris

selectValue是什麼？ – Igbaryya

打開控制檯。它會告訴你至少2個錯誤香港專業教育學院發現... –

@lgbaryya我試圖讓selectValue是什麼在下拉菜單中選擇該選項。 – BrianAndris

動態創建你可以通過標籤名稱的團體元素，並添加到它的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>

來源

2017-10-09 21:27:31 hurtbox

不幸的是，這個說法的指導原則我不能使用innerHTML/innerText。對不起，應該提到上面，編輯我的問題。所有下拉都必須動態創建。 – BrianAndris

如果使用利用事件你可以這樣做在一個稍微更合適的方法。當您爲「step1」下拉列表創建選項時，請將事件附加到每個對象。有幾種方法可以做到這一點，我的建議是：

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

where 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，所以我不知道。我知道我不是超級描述性的，但你只是提出一個提示。

來源

2017-10-09 21:33:53 Chuck

有沒有辦法做到這一點在下拉菜單中的某些選項？例如，如果用戶在第一個下拉列表中單擊「男性」，我只希望創建一個。 – BrianAndris

在任何給定的下拉菜單中，您正在調用一個函數來生成下一個關卡。您可以將任何您喜歡的變量傳遞到該生成器函數中，包括它應該具有的選項。所以如果用戶點擊「男性」，你可以通過一系列的選擇下一個級別。 – Chuck

創建另一個下拉基於在下拉菜單中

回答

相關問題