javascript - 响应 <select> HTML 元素中的 Onclick

Question

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

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

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

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

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

这是 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

你不应该在现代 html 中使用 onclick，但你可以尝试以下方法:

onchange="updateChar();"

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

此外，我建议下拉菜单以无害的空值开头，这样您就不会默认为第一个值——当然，除非有此意图:

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

编辑

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

在 HTML 中:

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

在 JavaScript 中:

document.addEventListener("DOMContentLoaded",init);

function init() {
    document.querySelector('select#zoneSelect').addEventListener('click')=updateChar;
}

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

document.querySelector('select[name="…"]')

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