在 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