在 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"