响应 <select> HTML 元素中的 Onclick

Question

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

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

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

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

这让我相信我错误地使用了 onclick 事件，而另一个事件更为惯用。也许期望是我在 select 元素下方有一个触发警报功能的按钮，从而推迟执行。但是，我想创建一个在选择 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

你不应该在现代 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 也是如此。

响应 <select> HTML 元素中的 Onclick

Responding to Onclick in a <select> HTML Element

javascript

tags

select

element

onclick