在 JavaScript 中從下拉選單中獲取所選選項的值
在 JavaScript 中，處理或跟蹤使用者互動（如滑鼠點選或鍵盤按鍵）是具有挑戰性的。由於 JavaScript 事件，我們可以更輕鬆地跟蹤使用者的互動並在網頁上的使用者進行一些更改後獲取更新的值。
例如，如果有一個下拉選單，並且你必須從所有其他選項的列表中選擇一個選項，則會發生以下情況：你可以輕鬆獲取從下拉選單中選擇的選項的值在滑鼠點選事件的幫助下列出。
在閱讀本文時，你將詳細瞭解如何實現這一點。
在 JavaScript 中使用滑鼠事件從列表中獲取所選選項
JavaScript 中的事件是跟蹤使用者在網頁上的互動（如滑鼠點選或鍵盤點選事件）的好方法。JavaScript 中有各種可用的事件，可在此處找到完整列表。在所有這些事件中，我們將只專注於討論滑鼠 click 事件。
每當使用者點選下拉選單中的任何選項時，我們的滑鼠點選事件就會被觸發。使用此功能，我們可以輕鬆地從下拉選單中獲取所選選項的值。
現在讓我們看看它在執行過程中是如何工作的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select id="list">
<option class="drop-down">test1</option>
<option class="drop-down" selected="selected">test2</option>
<option class="drop-down">test3</option>
</select>
<script src="./script.js"></script>
</body>
</html>
以下是 JavaScript 程式碼。
function myFunction() {
let elem = document.querySelectorAll(".drop-down");
elem.forEach(element=>{
element.addEventListener("click", e =>{
console.log(e.target.innerHTML);
});
})
}
myFunction();
輸出：
test2
test3
test1
請注意，輸出將根據使用者從下拉選單中選擇的選項而有所不同。
在我們的 HTML 中，我們有一個 select 標籤，其 id 為 list，它將用於建立一個下拉選單。在這種情況下，select 標籤中有三個選項，每個選項都有一個 drop-down 類名。最後，我們將連結 body 標籤末尾的 JavaScript 程式碼，因為它存在於一個單獨的檔案中。
在 JavaScript 中，我們有一個名為 myFunction() 的函式。在這裡，我們首先使用 querySelectorAll 屬性使用類名 drop-down 獲取下拉選單的所有選項元素。此過程將返回一個包含下拉選單所有選項的陣列。然後，我們將這個陣列儲存在一個名為 elem 的變數中。
現在我們已將所有選項儲存在變數 elem 中，我們將對該變數使用 for each 迴圈。for each 迴圈將幫助我們獲取陣列的各個元素，因此我們現在可以向陣列的每個選項元素新增事件偵聽器。
可以使用變數 element 訪問陣列中的各個元素，該變數作為引數傳遞給 for each 迴圈。要將事件新增到 element，我們必須使用 JavaScript 提供的名為 addEventListener() 的方法，該方法有兩個引數。
第一個引數是 click 事件，第二個引數是 callback 函式。click 事件告訴瀏覽器只有在使用者單擊（滑鼠左鍵）下拉選單中的任何選項時才執行 callback 函式。callback 函式本身接受一個名為 e 或 event 的引數，它將幫助我們獲取使用者選擇的元素。
在 callback 函式中，你可以編寫任何你想要的程式碼。由於我們想要獲得在這種情況下選擇的選項的值，我們將使用 e.target。此命令將告知當前正在選擇哪個 HTML 元素。
最後，要獲取所選選項的值，我們可以使用 e.target.innerHTML 並將其傳遞到 console.log() 方法中以檢視控制檯視窗中的輸出。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn