在 JavaScript 中选择 Onchange

select 是一个 HTML 输入元素，它指定用户可以从中选择任何选项的选项下拉列表。本文将学习如何在 JavaScript 中检测这个 HTML select 的 onChange 事件。

在 JavaScript 中检测 select 元素的 onChange 事件

当用户提交对元素值的更改时，会为 input、select 和 textarea 引发 change 事件。与 input 事件不同，change 事件不一定会在每次元素值更改时触发。

根据要更改的元素的类型以及用户与元素的交互方式，change 事件会在不同的时间触发。

1. 如果通过单击或使用键盘选中或取消选中复选框输入项。
2. 如果 radio 输入元素被激活，但如果它没有被激活则不会。
3. 如果用户明确确认更改，例如，通过鼠标单击从选择下拉列表中选择一个值。
4. 如果该元素在其值更改但未提交后失去焦点，例如，在编辑 textarea 或 text 输入类型的值后。

例子：

<select id="osDemo" onchange="detectChange(this)">
    <option value="Linux">Linux</option>
    <option value="Windows">Windows</option>
    <option value="MacOS">MacOS</option>
</select>

function detectChange(selectOS) {
  console.log(selectOS.value)
}

我们在上面的代码中给出了所有操作系统的下拉列表。一旦用户选择任何操作系统，浏览器将检测到更改，并触发 onChange 事件。

用户还可以使用元素的 id 监听 select 元素的 onChange 事件。

我们在下面的代码中监听 id 为 osDemo 的节点。一旦浏览器检测到更改，就会触发 onChange 事件。

你可以选择任何方法来监听 select 元素的 onChange 事件。两个代码的输出将相似，如下所示。

document.getElementById('osDemo').onchange = function() {
  console.log('document', document.getElementById('osDemo').value);
};

输出：

"document", "MacOS"