如何获取下拉 jQuery 的选定值 - JavaScript

下拉框（下拉列表）是一种可以让用户通过单击下拉列表选择项目的交互控件。在 Web 应用程序中，我们通常使用下拉框来允许用户选择一个或多个选项。在这篇文章中，我们将了解如何使用 jQuery 获取下拉框的选定值。

获取下拉框的选中值

要获取下拉框的选中值，我们可以使用 jQuery 的 val() 方法。这个方法返回被选中选项的值。下面是一个例子：

// HTML
<select id="my-select">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

// JavaScript
var selectedValue = $('#my-select').val();
console.log(selectedValue); // 输出: 1（如果选中了第一个选项）

在这个例子中，我们使用了 jQuery 的选择器 $('#my-select') 来获取 id 为 my-select 的下拉框。然后，我们调用 val() 方法来获取选中选项的值，将其存储在 selectedValue 变量中。

获取下拉框的选中文本

如果你想获取选中选项的文本而不是值，可以使用 text() 方法：

// HTML
<select id="my-select">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

// JavaScript
var selectedText = $('#my-select option:selected').text();
console.log(selectedText); // 输出: "选项1"（如果选中了第一个选项）

在这个例子中，我们使用了 option:selected 选择器来获取选中选项的文本。然后，我们调用 text() 方法将文本存储在 selectedText 变量中。

获取多选下拉框的选中值

如果你使用的是多选下拉框，可以使用 val() 方法来获取所有选中选项的值。这个方法将返回一个包含所有选中值的数组。下面是一个例子：

// HTML
<select id="my-select" multiple>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

// JavaScript
var selectedValues = $('#my-select').val();
console.log(selectedValues); // 输出: ["1", "2"]（如果选中了前两个选项）

在这个例子中，我们将 multiple 属性设置为下拉框，使其允许多选。然后，我们使用 val() 方法来获取选中选项的值，将其存储在 selectedValues 变量中。

结论

获取下拉框的选定值是非常简单的。无论你是在处理单个选项还是多个选项，jQuery 都提供了简单而直观的方法来获取选中值。希望这篇文章能够对你有所帮助！