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

您可以很容易地从输入中获得一个值。你不需要这些复杂的价值计算。另外，当您想要使用特定的值时，最好使用开关大小写。它看起来更干净，需要更少的代码。

​

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>

​