在 JavaScript 中选择 Onchange
select
是一个 HTML 输入元素,它指定用户可以从中选择任何选项的选项下拉列表。本文将学习如何在 JavaScript 中检测这个 HTML select
的 onChange
事件。
在 JavaScript 中检测 select
元素的 onChange
事件
当用户提交对元素值的更改时,会为 input
、select
和 textarea
引发 change
事件。与 input
事件不同,change
事件不一定会在每次元素值更改时触发。
根据要更改的元素的类型以及用户与元素的交互方式,change
事件会在不同的时间触发。
- 如果通过单击或使用键盘选中或取消选中
复选框
输入项。 - 如果
radio
输入元素被激活,但如果它没有被激活则不会。 - 如果用户明确确认更改,例如,通过鼠标单击从选择下拉列表中选择一个值。
- 如果该元素在其值更改但未提交后失去焦点,例如,在编辑
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"
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