在 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