如何检查下拉列表中的选定值？

在开发 web 应用时，下拉列表是一个常见的组件，通常用于选择从一个预定义的选项集合中的一项。有时，我们需要检查下拉列表中用户选择的选项，以便进一步处理或验证输入。

下面介绍如何使用 JavaScript 和 jQuery 检查下拉列表中的选定值。

1. 使用 JavaScript

使用 JavaScript，我们可以通过以下方式检查下拉列表中的选定值：

let selectElement = document.getElementById("mySelect");
let selectedValue = selectElement.options[selectElement.selectedIndex].value;

其中，mySelect 是下拉列表的 ID，selectedValue 是用户选择的选项的值。

我们可以将上述代码放入事件处理程序中，以在用户选择选项时执行检查操作。例如：

selectElement.addEventListener("change", function() {
  let selectedValue = selectElement.options[selectElement.selectedIndex].value;
  console.log("Selected value is: " + selectedValue);
});

2. 使用 jQuery

如果你使用 jQuery，代码就变得更加简洁：

let selectedValue = $("#mySelect option:selected").val();

我们仍然需要指定下拉列表的 ID，但是可以直接使用 jQuery 的选择器 :selected 来选取用户选择的选项。上述代码将返回用户选择的选项的值。

同样，我们可以将上述代码放入事件处理程序中，以在用户选择选项时执行检查操作。例如：

$("#mySelect").on("change", function() {
  let selectedValue = $("#mySelect option:selected").val();
  console.log("Selected value is: " + selectedValue);
});

总结

无论你是使用原生 JavaScript 还是 jQuery，都可以轻松地检查下拉列表中的选定值。只需获取下拉列表元素并使用选定选项的索引或选择器，就可以获取用户选择的选项的值。