Javascript下拉菜單值

Question

我想要在下拉菜單中訪問選定選項的值。我一直留下一個「未定義」的值。

這裏是我創建的HTML列表：

function setDifficulty() { 
 
    var difficultySelector = document.getElementById("difficulty"); 
 
    var difficulty = difficultySelector.selectedIndex; 
 

 
    if (difficulty.options[difficulty.selectedIndex].value == "0") { 
 
    window.alert("easy"); 
 
    } else if (difficulty.options[difficulty.selectedIndex].value == "1") { 
 
    window.alert("medium") 
 
    } else if (difficulty.options[difficulty.selectedIndex].value == "2") { 
 
    window.alert("hard"); 
 
    } else 
 
    window.alert(difficulty.value); 
 
}

<select id="difficulty" onchange="setDifficulty();"> 
 
    <option value="0">Easy</option> 
 
    <option value="1">Medium</option> 
 
    <option value="2">Hard</option> 
 
</select>

我在做什麼錯？

Answer 1

下面的代碼將工作

function setDifficulty() { 
    var difficultyElt = document.getElementById("difficulty"); 
    var value = difficultyElt.options[difficultyElt.selectedIndex].value; 
    if (value == "0") { 
     window.alert("easy"); 
    } else if (value == "1") { 
     window.alert("medium") 
    } else if (value == "2"){ 
     window.alert("hard"); 
    } 
} 

此外，您還可以輸出文本直接值：

var difficultyElt = document.getElementById("difficulty"); 
var text = difficultySelector.options[difficultySelector.selectedIndex].text; 
window.alert(text); 

Answer 2

您可以指定下拉菜單的onChange處理JavaScript和從那裏得到的值如下所示：

document.getElementById("difficulty").onchange = function() { 
 
    if (this.value == "0") { 
 
    window.alert("easy"); 
 
    } else if (this.value == "1") { 
 
    window.alert("medium") 
 
    } else if (this.value == "2") { 
 
    window.alert("hard"); 
 
    } else 
 
    window.alert(this.value); 
 
}

<select id="difficulty"> 
 
<option value="0">Easy</option> 
 
<option value="1">Medium</option> 
 
<option value="2">Hard</option> 
 
</select>

Answer 3

您可以輕鬆從輸入中獲取值。你不需要這些棘手的價值計算。另外，當你想使用特定的值時，最好使用switch-case。它看起來更清潔並且需要更少的代碼。

function setDifficulty() { 
 
    var difficultySelector = document.getElementById("difficulty"); 
 
    var difficulty = difficultySelector.value; 
 
    
 
    switch (difficulty) { 
 
     case "0": 
 
     window.alert("easy"); 
 
     break; 
 
     case "1": 
 
     window.alert("medium"); 
 
     break; 
 
     case "2": 
 
     window.alert("hard"); 
 
     break; 
 
     default: 
 
     window.alert(difficulty.value); 
 
    } 
 
}

<select id="difficulty" onchange="setDifficulty();"> 
 
       <option value="0">Easy</option> 
 
       <option value="1">Medium</option> 
 
       <option value="2">Hard</option> 
 
      </select>