在 Web 开发的日常工作中，处理表单元素是我们最常面临的任务之一。你是否曾经遇到过这样的需求：用户在一个下拉列表中选择了一个选项，而你需要获取这个选项显示出来的文本（例如“苹果”），而不是它背后的 value 值（例如“1”）？
在这篇文章中，我们将深入探讨如何使用 jQuery 轻松获取下拉列表中选中项的文本。我们不仅会学习基础的语法，还会深入剖析其背后的工作原理，提供多个实战代码示例，并分享一些在实际生产环境中非常有用的技巧和最佳实践。无论你是刚入门的前端新手，还是希望巩固基础的资深开发者，我相信你都能从这篇文章中有所收获。
目录
核心概念：Value 与 Text 的区别
在开始写代码之前，让我们先理清一个关键的概念，这通常是初学者容易混淆的地方：Value（值） 和 Display Text（显示文本） 的区别。
想象一下我们在构建一个水果选择的表单：
红富士苹果
香蕉
在这里，Value 是提交给后端数据库的 ID（如 101），而 Text 是用户在屏幕上看到的名称（如“红富士苹果”）。jQuery 提供了不同的方法来分别获取这两个数据。我们的目标就是要精准地捕获后者。
方法一：使用 val() 方法
首先，让我们从最基础但经常被误用的 val() 方法开始。虽然它主要用于获取选中项的 value 值，但理解它的工作机制是我们掌握后续方法的基础。
语法解析
val() 是 jQuery 中一个极其强大的内置方法，主要用于匹配集合中第一个元素的 value 属性。
$(selector).val()
如果你不传递参数，它会获取当前值；如果你传递了一个参数，它会设置新的值。
代码示例：获取 Value 值
让我们先看一个获取 Value 的例子，看看它是如何工作的。为了方便你测试，我在代码中增加了中文注释。
jQuery val() 示例
body { font-family: Arial, sans-serif; padding: 20px; }
.container {
width: 400px;
padding: 20px;
border: 2px solid #27ae60;
border-radius: 8px;
background-color: #f9f9f9;
}
#result { margin-top: 15px; font-weight: bold; color: #2c3e50; }
button { padding: 8px 16px; cursor: pointer; background: #27ae60; color: white; border: none; border-radius: 4px; }
button:hover { background: #219150; }
获取 Value 值示例
请选择一个选项：
One
Two
Three
Four
Five
$(document).ready(function() {
// 监听按钮点击事件
$("#submit").click(function() {
// 使用 val() 获取选中的 value 属性
const selectedVal = $("#myselection").val();
// 在页面上显示结果
if(selectedVal) {
$(‘#result‘).text(`选中的 Value 是: ${selectedVal}`).fadeIn();
} else {
$(‘#result‘).text(‘请先选择一个选项！‘);
}
});
});
在这个例子中，如果你选择“One”，INLINECODEd16549e7 将会返回字符串 INLINECODE7a66f554。这对于需要将 ID 发送给后端的场景非常实用。
方法二：使用 INLINECODEfe171f30 选择器与 INLINECODE0d1878be 方法
接下来，我们要进入本文的核心部分。如何获取那个用户实际看到的“文本”？这需要我们将两个强大的 jQuery 特性结合起来：伪类选择器 和 文本操作方法。
原理解析
- INLINECODE916b94a3: 这是一个专门为 INLINECODE599e718e 元素设计的 jQuery 扩展选择器。它能精准地找到当前处于选中状态的
元素。 -
text(): 这个方法用于获取匹配元素集合中每个元素的合并文本内容。
当我们把它们连在一起写时，就像发出了一条精准的指令：“找到 ID 为 X 的下拉框，然后在它的所有子项中找到被选中的那一项，最后提取出它的文字。”
代码示例：获取选中的文本内容
让我们把上面的例子稍作修改，这次我们要获取并显示 "One", "Two" 这样的文本，而不是数字。
jQuery 获取选中文本
body { font-family: ‘Segoe UI‘, Tahoma, Geneva, Verdana, sans-serif; background: #eef2f3; padding: 20px; }
.card {
background: white;
width: 100%;
max-width: 500px;
margin: 0 auto;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
text-align: center;
}
select { padding: 8px; width: 80%; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 4px; }
button { padding: 10px 20px; background-color: #3498db; color: white; border: none; border-radius: 5px; font-size: 16px; transition: background 0.3s; }
button:hover { background-color: #2980b9; }
.result-box { margin-top: 20px; padding: 15px; background: #dfe6e9; border-radius: 5px; display: none; }
文本获取演示
请从下方列表中选择一项：
红富士苹果
香蕉
巨峰葡萄
草莓
西瓜
$(document).ready(function() {
$("#submit").click(function() {
// 核心代码：使用 option:selected 选择器配合 text() 方法
// 1. $("#myselection") 选中下拉框
// 2. .find("option:selected") 或直接链式写法找到选中项
// 3. .text() 提取文本
const selectedText = $("#myselection option:selected").text();
const resultBox = $(‘#result‘);
// 简单的验证逻辑
if(selectedText) {
resultBox.html(`你选择的文本是：${selectedText}`).fadeIn();
} else {
resultBox.text("似乎没有选择任何东西。").fadeIn();
}
});
});
深入理解：为什么是 INLINECODEa4ed5d34 而不是 INLINECODE3536eab0？
你可能会问，为什么不能直接对下拉框调用 text()？
在 DOM 结构中，INLINECODE96b188d4 标签本身并不包含文本，文本是包含在它的子元素 INLINECODE454fb1ec 里面的。INLINECODE680e3c11 实际上会返回所有 INLINECODEe05dccd1 的文本拼接在一起的字符串（即"红富士苹果香蕉巨峰葡萄…"），这显然不是我们想要的。因此，我们必须先缩小范围到具体的那个 option:selected。
进阶实战：处理更复杂的场景
在真实的项目开发中，情况往往比上面的示例更复杂。让我们来看几个更贴近实战的场景。
场景一：多选下拉框
如果你的 HTML 是多选模式 (INLINECODE5767fb20)，那么上述逻辑会略有不同。INLINECODEdf4e5ed7 方法会返回一个包含所有选中 value 的数组，而 text() 只会返回第一个选中项的文本。我们需要遍历来获取所有文本。
// 获取所有选中项的文本数组
function getAllSelectedTexts(selectorId) {
let texts = [];
// 遍历每一个被选中的 option
$(`#${selectorId} option:selected").each(function() {
// 将 $(this) 指向当前遍历到的 option 元素
texts.push($(this).text());
});
return texts.join(", ");
}
场景二：响应式选择（无需点击按钮）
用户有时候希望在改变选择的瞬间就能看到结果，而不是还要去点一个“提交”按钮。我们可以监听 change 事件来实现这种丝滑的体验。
$(document).ready(function() {
// 监听下拉框的 change 事件
$("#myselection").on("change", function() {
// $(this) 指代触发事件的 select 元素本身
// 找到其中被选中的 option 并获取文本
var selectedOption = $(this).find("option:selected").text();
console.log("用户选择了: " + selectedOption);
// 实时更新 UI
$("#live-display").text("当前选中: " + selectedOption);
});
});
性能优化与最佳实践
虽然 $("#id option:selected").text() 这行代码非常简短，但在高性能要求的应用中，我们还是需要注意一些细节。
1. 缓存 jQuery 对象
如果你需要在页面生命周期的多个地方获取这个下拉框的值，请务必缓存它。避免重复查询 DOM。
// 好的做法
const $mySelect = $("#myselection");
// 按钮点击 A
$("#btn-a").click(function() {
console.log($mySelect.find("option:selected").text());
});
// 按钮点击 B
$("#btn-b").click(function() {
console.log($mySelect.val());
});
2. 使用 find() 代替隐式查找
虽然 INLINECODEc2ccb6f6 是隐式查找（在所有后代中查找），但显式使用 INLINECODEbc0bb38b 在某些复杂场景下性能更优，且代码意图更清晰。
// 推荐写法：语义更明确
const text = $("#myselection").find("option:selected").text();
3. 常见错误排查
错误现象： 获取的文本是空的，或者是 undefined。
可能原因及解决方案：
- 时机问题： 代码在 DOM 还没加载完就执行了。请确保所有 jQuery 代码都包裹在
$(document).ready(function() { ... });中。 - ID 拼写错误： 检查 HTML 中的 ID 是否与 jQuery 选择器完全一致（区分大小写）。
- 干扰元素： 页面上是否存在多个相同 ID 的元素？这是 HTML 非法结构，会导致 jQuery 只匹配第一个。
总结
在这篇文章中，我们详细探讨了如何使用 jQuery 获取下拉列表的选中文本。我们首先区分了 Value 和 Text 的本质不同，随后深入剖析了 INLINECODEc5b3d9f9 方法和 INLINECODEbea87fbf 选择器的组合用法。
我们不仅看到了基础的示例，还通过更丰富的代码实战了单选、多选以及事件监听等场景。关键在于记住这个核心模式：
// 获取 Value
$("#selectId").val();
// 获取显示文本
$("#selectId option:selected").text();
希望这篇文章能帮助你解决现在手头的问题。jQuery 作为一个经典的库，其简洁的 API 设计依然让许多 DOM 操作变得轻松愉快。下次当你需要在表单中处理用户选择时，你应该已经知道如何高效、准确地完成任务了。祝编码愉快！