HTML 的 <select> 元素提供了一种让用户从多个选项中进行选择的方法。当用户选择一个选项后，我们希望能够处理这个事件并做出相应的操作。那么问题来了：该事件的名称是什么？
事件名称
当用户选择一个选项时，<select> 标签会触发 change 事件。因此，我们可以通过以下方式来监听这个事件：
const selectElement = document.querySelector('select');
selectElement.addEventListener('change', (event) => {
// 处理选中事件的代码
});事件对象
当 change 事件被触发时，浏览器会创建一个事件对象，并将其作为参数传递给事件监听函数。事件对象包含有关事件的各种信息，例如用户选择哪个选项以及选项的值。
以下是一个示例代码，演示如何获取用户选择的选项的文本和值：
-- -------------------- ---- -------
------- --------------
------- -------------------------
------- --------------------------
------- --------------------------
---------
--------
----- ------------- - ------------------------------------
---------------------------------------- ------- -- -
----- -------------- - --------------------------------
----- ------------ - ---------------------------
----- ------------- - ---------------------
----------------- ------------------ --------------------
---
---------在上面的示例代码中，我们使用 event.target.selectedOptions[0] 来获取用户选择的选项元素。然后，我们可以使用 textContent 属性来获取选项的文本内容，或者使用 value 属性来获取选项的值。
指导意义
了解 <select> 标签的选中事件名称及其相关信息非常重要，因为它是处理用户输入和交互的关键之一。此外，还有许多其他与表单元素和交互相关的事件，例如 submit、input 等等。
掌握这些事件的知识可以帮助我们创建更好的用户体验，并确保我们的网站或应用程序能够正确地响应用户的操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25553