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

您可以在JavaScript中为下拉菜单指定一个onchange处理程序，然后从中获取下拉列表的值，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以轻松从输入中获取值。你不需要这些棘手的价值计算。此外，当您想使用特定值时，最好使用switch-case。它似乎更清洁，需要更少的代码。

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Javascript下拉菜单值

3 个答案: