在 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