如何获取下拉列表的选定值的文本？ [复制]

Posted 2023-02-22

【中文标题】如何获取下拉列表的选定值的文本？ [复制]

【英文标题】：How to get the text of the selected value of a dropdown list? [duplicate]

【发布时间】：2012-05-11 19:10:05

【问题描述】：

可能重复：jQuery get specific option tag textHow to get the text of the selected option of a select using jquery?

我有一个下拉列表，我想知道所选项目的文本。例如：

<select>
    <option value="1">Volvo</option>
    <option value="2">Saab</option>
    <option value="3">Mercedes</option>
</select>

如果我知道选定的值，我怎样才能得到它的文本值？例如，如果值为1，我如何获得Volvo？

非常感谢您的帮助。

【参考方案1】：

您可以使用option:selected 获取select 元素的选定选项，然后使用text() 方法：

$("select option:selected").text();

这是一个例子：

console.log($("select option:selected").text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select>
    <option value="1">Volvo</option>
    <option value="2" selected="selected">Saab</option>
    <option value="3">Mercedes</option>
</select>

【讨论】：

然后您可以在文档中添加指向每个 jQuery 函数的链接......无论如何，我不喜欢他在编辑中所做的方式。使用$("select).val() 可以更简单。正如我所说，由你决定。顺便说一下 +1。

好的，我编码了alert($("#presetname-"+rname+" option:selected").text());​，但它有一个错误。知道为什么它不起作用..？

错误是什么，rname 有什么值？

上面写着illegal character。 rname 只是一个字符串值。

工作得很好，谢谢。

【参考方案2】：

$("#select_id").find("option:selected").text();

如果您的控件位于服务器端，这将很有帮助。在 .NET 中它看起来像：

$('#<%= dropdownID.ClientID %>').find("option:selected").text();

【参考方案3】：

最简单的方法是通过css3 $("select option:selected") 然后使用.text() 或.html() 函数。取决于你想拥有什么。

【讨论】：

CSS3?这是从哪里来的？

确实，:selected 不是 CSS3，它是 jQuery 选择器增强功能之一。

"因为:selected是一个jQuery扩展并且不是CSS规范的一部分，所以使用:selected的查询不能......" source跨度>

哦，感谢您的更正！我认为 :selected 和 :checked 是 css3 伪类。而且我知道 jquery 只是 borrowing css 选择器 :)

【参考方案4】：

嗨，如果你有这样的下拉列表

<select id="testID">
<option value="1">Value1</option>
<option value="2">Value2</option>
<option value="3">Value3</option>
<option value="4">Value4</option>
<option value="5">Value5</option>
<option value="6">Value6</option>
</select>
<input type="button" value="Get dropdown selected Value" onclick="getHTML();">

在为下拉列表提供 id 后，您只需要像这样添加 jquery 代码

function getHTML()

      var display=$('#testID option:selected').html();
      alert(display);