在 JavaScript 中选择 Onchange

Shraddha Paghdar 2022年12月21日 2022年5月10日
在 JavaScript 中选择 Onchange

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

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

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

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

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

例子:

<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"
Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

相关文章 - JavaScript Onchange