jQuery: 如何从下拉列表（select）中获取文本 — 完整解析

您是否曾有过这样的想法：“为什么我获取到的是 value，而我需要的是文本？”

欢迎来到 PythonLib！今天我们将解析初学者和经验丰富的前端开发者都会遇到的一个最常见问题。您创建了一个漂亮的表单，添加了一个下拉列表（select box），用 jQuery 编写了事件处理程序……然后突然发现，您需要的不是 value（国家数字代码、商品 ID 或类似内容），而是用户在菜单中看到的 可读文本。

这个问题在 Stack Overflow 上获得了数千次浏览和数十个答案。我们不仅仅是复制其中一个答案——我们将逐步分解这个任务，展示几种解决方案，并提供您可以立即插入到项目中的现成代码。开始吧！

问题：value 与 text

想象一个典型的 HTML 代码：

<select id="citySelect">\n    <option value="1">莫斯科</option>\n    <option value="2">圣彼得堡</option>\n    <option value="3">新西伯利亚</option>\n</select>

当用户选择“圣彼得堡”时，标准的 jQuery 代码 $('#citySelect').val() 会返回 “2”。但如果您需要在页面上显示“圣彼得堡”呢？或者将可读的名称发送到分析系统？这时 DOM 导航的魔力就开始了。

解决方案 #1：使用 .text() 的经典方法

最简单直观的方法是获取选中的 <option> 元素，然后提取其文本内容。

$('#citySelect').on('change', function() {\n    var selectedText = $(this).find('option:selected').text();\n    console.log('您选择了:', selectedText);\n});

这是如何工作的？
\n$(this) — 指向我们的 select 元素（在事件处理程序内部）。
\n.find('option:selected') — 在子 option 中查找具有 selected 属性的那个。
\n.text() — 提取纯文本（不含 HTML 标签）。

额外提示： 如果页面上有多个 select，请使用类或 ID 代替 this。

解决方案 #2：使用 .children() 和 .filter()

有时通过过滤子元素来处理更方便，特别是当您有复杂的嵌套或自定义标签时。

$('#citySelect').on('change', function() {\n    var selectedText = $(this).children('option:selected').text();\n    // 使用 filter 的替代方法：\n    // var selectedText = $(this).children('option').filter(':selected').text();\n    alert('所选城市: ' + selectedText);\n});

find() 和 children() 的区别在于，children() 只查看直接子元素，而 find() 查看所有层级的后代元素。对于标准 select 来说这没有区别，但了解这一点很有用。

解决方案 #3：在页面加载时获取文本

通常需要立即显示所选文本，而无需等待 change 事件。例如，在表单初始化时。

$(document).ready(function() {\n    var initialText = $('#citySelect option:selected').text();\n    $('#selectedCityDisplay').text('当前城市: ' + initialText);\n});

这段代码在 DOM 加载时执行一次，并将默认选中的 option 文本写入 ID 为 selectedCityDisplay 的元素中。

解决方案 #4：通用辅助函数

如果您正在编写一个严肃的应用程序，最好将逻辑提取到单独的函数中。这样代码会更清晰且可复用。

function getSelectedText(selectId) {\n    return $('#' + selectId + ' option:selected').text();\n}\n\n// 使用：\n$('#citySelect').on('change', function() {\n    var text = getSelectedText('citySelect');\n    co