如何在 jQuery 中获取所选选项的文本值？

jQuery 是一个广泛应用的 JavaScript 库，它提供了简单易用的 API，可以让开发者用更少的代码来完成复杂的任务。在开发 Web 应用中，经常会使用下拉框等控件来收集用户选择的数据。在这种情况下，如何获取所选选项的文本值是一个很重要的问题。下面我们来看看如何在 jQuery 中获取所选选项的文本值。

获取所选选项的文本值

要获取下拉框中所选选项的文本值，可以使用 jQuery 提供的 val() 方法和 text() 方法。其中，val() 方法用于获取选项的值，而 text() 方法用于获取选项的文本值。具体代码如下：

// HTML 代码
<select id="mySelect">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
</select>

// jQuery 代码
const selectedOptionText = $('#mySelect option:selected').text();
console.log(selectedOptionText); // 输出所选选项的文本值

在上面的代码中，我们首先通过 jQuery 选择器获取到下拉框元素，然后使用 option:selected 过滤器获取到当前所选选项，并调用 text() 方法获取选项的文本值。最后，我们将所选选项的文本值输出到控制台上。

获取所有选项的文本值

如果要获取所有选项的文本值，可以使用 jQuery 提供的 each() 方法遍历所有选项，并分别获取它们的文本值。具体代码如下：

// HTML 代码
<select id="mySelect">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
</select>

// jQuery 代码
$('#mySelect option').each(function() {
    const optionText = $(this).text();
    console.log(optionText); // 分别输出每个选项的文本值
});

在上面的代码中，我们通过 $('#mySelect option') 选择器获取到所有选项，然后使用 each() 方法遍历每个选项，并分别获取它们的文本值。最后，我们将每个选项的文本值分别输出到控制台上。

总结

通过上面的介绍，我们可以知道在 jQuery 中获取所选选项的文本值是非常简单的。只需要使用 option:selected 过滤器获取当前所选选项，并使用 text() 方法获取选项的文本值即可。如果要获取所有选项的文本值，可以使用 each() 方法遍历每个选项，并分别获取它们的文本值。