响应 <select> HTML 元素中的 Onclick

Question

我在 HTML 中创建了一个选择元素下拉列表。select 标签有三个选项。“onclick”JS 事件附加到选择标签。在 JavaScript 中，我有一个匹配函数，当且仅当第一个选项被选中时，它才会提醒用户。这是一个带有我的代码的 JSFiddle。

https://jsfiddle.net/TempusF/rad11vgx/12/

我遇到的问题是，在 Firefox for mac 上，只有在您首先选择其他选项时才会显示此警报。也就是说，如果页面加载并显示“Zone 1”，则第二次单击Zone 1 不会触发警报。您必须单击区域 2 或区域 3，然后单击返回区域 1 以获取警报。

但是，在 Firefox for Windows 上，任何点击 Zone 1 选项都会显示警报。

这让我相信，当不同的事件更惯用时，我错误地使用了 onclick 事件。也许期望是我在 select 元素下方有一个触发警报功能的按钮，从而推迟执行。但是，我想创建一个在选择选项时立即做出反应的界面。

这是 HTML：

<select id="zoneSelect" onclick="updateChar();">
  <option value="zone1">Zone 1</option>
  <option value="zone2">Zone 2</option>
  <option value="zone3">Zone 3</option>
</select>

这是 ecmascript。

function updateChar() {

    var zone = document.getElementById("zoneSelect");

    if (zone.value == "zone1"){

        alert("You clicked Zone 1.");
    }
}

Answer 1

您不应该onclick在现代 html 中使用，但您可以尝试以下操作：

onchange="updateChar();"

更好的是，您应该在启动代码中设置事件处理程序。无论如何，它仍然是change事件。

另外，我建议下拉菜单以一个无害的空值开头，这样你就不会默认为第一个值——当然，除非这是故意的：

 <option value="">Choose one …</option>

编辑

根据评论，您不应该在现代 JavaScript 中使用内联事件处理程序，这是您今天的做法：

在 HTML 中：

onchange="updateChar();"

在 JavaScript 中：

 <option value="">Choose one …</option>

更好的是，如果select元素是表单的一部分，那么它应该有一个name属性，而您不需要id属性。在 JavaScript 中，您可以将其称为：

<select id="zoneSelect">
    <!-- options-->
</select>

对于您可能应用的任何 CSS 也是如此。