使用 jQuery 从下拉列表（选择框）中获取所选文本-解网

问：

如何从jQuery的下拉列表中获取所选文本（而不是所选值）？

javascript jquery dom 下拉菜单 jquery-selectors

13赞 ankush981 6/4/2015

只有我的两分钱：“ASP”下拉列表没什么特别的;它只是很好的旧 HTML。:-)

0赞 Dilip Kumar Yadav 10/18/2016

可以参考这篇文章：javascriptstutorial.com/blog/...

0赞 rogerdpack 1/19/2017

对于 Vanilla JavaScript 方式，请参阅 stackoverflow.com/a/5947/32453

0赞 Shahid Hussain Abbasi 1/12/2019

只需 $（this）.prop（'selected'， true）;将 .att 替换为 .prop，它适用于所有浏览器

0赞 Ali NajafZadeh 8/4/2021

$（“#yourdropdownid option：selected”）.text（）;

答：

289赞 kgiannakakis 10/29/2009 #1

试试这个：

$("#myselect :selected").text();

对于 ASP.NET 下拉列表，可以使用以下选择器：

$("[id*='MyDropDownId'] :selected")

4016赞 rahul 10/29/2009 #2

$("#yourdropdownid option:selected").text();

218赞 MHollis 5/18/2012

我认为这应该是因为 is（）返回对象是否与选择器匹配的布尔值。$("#yourdropdownid").children("option").filter(":selected").text()

45赞 scubbo 6/12/2012

我附议关于 is（）返回一个布尔值的评论;或者，使用以下小改动： $（'#yourdropdownid'）.children（“option：selected”）.text（）;

104赞 Seimen 4/24/2013

$('select').children(':selected')是最快的方法：jsperf.com/get-selected-option-text

0赞 Leffa 4/23/2022

如果有像你这样的scape caracteres，可以添加这样的内容：\n \t.trim()$("#yourdropdownid option:selected").text().trim();

31赞 Zarni 10/7/2010 #3

var someName = "Test";

$("#<%= ddltest.ClientID %>").each(function () {
    $('option', this).each(function () {
        if ($(this).text().toLowerCase() == someName) {
            $(this).attr('selected', 'selected')
        };
    });
});

这将帮助您找到正确的方向。以上代码已全面测试，如果您需要进一步的帮助，请告诉我。

69赞 Rafael 8/17/2011 #4

$("option:selected", $("#TipoRecorde")).text()

54赞 Neeraj 11/14/2011 #5

$("#DropDownID").val()将给出选定的索引值。

40赞 Peter 11/28/2011

不完全是问题的答案，但对我有用。该问题需要所选文本。

0赞 Roman Denisenko 2/14/2023

@Neeraj，谢谢你的回答。我发现 val（）！= text（），如果您有多个值，您会得到类似......'\n\t白俄罗斯语\n\t加泰兰语\n\t中文简体\n\t中文繁体\n\t克罗地亚语\n\t捷克语\n\t丹麦语\n\t荷兰语\n\tESPERANTO\n\t爱沙尼亚语\n\t芬兰语\n\t法语\n\t加利西亚语\n\tGERMA'

120赞 Kirk Liemohn 2/4/2012 #6

如果您已经在变量中提供了下拉列表，那么这对我有用：

$("option:selected", myVar).text()

关于这个问题的其他答案对我有帮助，但最终选择的 jQuery 论坛线程 $（this + “option：selected”）.attr（“rel”）选项在 IE 中不起作用对帮助最大。

更新：修复了上述链接

0赞 Dushyant Singh 7/23/2022

''' <script> $（document）.ready（function（） { $（“#submit”）.click（function（） { var value = $（“#myselection option：selected”）; alert（value.text（））; }）;</script> ''' <br> 链接： geeksforgeeks.org/...

238赞 JYX 3/19/2012 #7

例如，此处发布的答案

$('#yourdropdownid option:selected').text();

对我不起作用，但这确实：

$('#yourdropdownid').find('option:selected').text();

它可能是 jQuery 的旧版本。

44赞 Kamrul 1/25/2013 #8

对于所选项目的文本，请使用：

$('select[name="thegivenname"] option:selected').text();

对于所选项的值，请使用：

$('select[name="thegivenname"] option:selected').val();

16赞 Thangamani Palanisamy 4/23/2013 #9

$("select[id=yourDropdownid] option:selected").text()

这工作正常

56赞 Binita Bharati 9/25/2013 #10

这对我有用：

$('#yourdropdownid').find('option:selected').text();

jQuery版本：1.9.1

20赞 FAA 11/6/2013 #11

对于那些使用 SharePoint 列表并且不想使用长期生成的 ID 的用户，这将起作用：

var e = $('select[title="IntenalFieldName"] option:selected').text();

17赞 Nikhil Agrawal 1/30/2014 #12

 $("#selectID option:selected").text();

你可以使用任何jQuery选择器，比如使用类。#selectID.selectClass

如此处的文档所述。

：selected 选择器适用于 <option> 元素。它不适用于复选框或无线电输入;对它们使用 ：checked。

.text（） 文件根据此处的文档。

获取匹配元素集中每个元素的组合文本内容，包括它们的后代。

因此，您可以使用该方法从任何 HTML 元素中获取文本。.text()

有关更深入的说明，请参阅文档。

32赞 124 2/1/2014 #13

$("#dropdownID").change(function(){
  alert($('option:selected', $(this)).text());
});

9赞 kishore 7/31/2014 #14

用：

('#yourdropdownid').find(':selected').text();

35赞 MD SHAHIDUL ISLAM 8/4/2014 #15

多种方式

1. $("#myselect option:selected").text();

2. $("#myselect :selected").text();

3. $("#myselect").children(":selected").text();

4. $("#myselect").find(":selected").text();

7赞 vineet 12/5/2014 #16

在兄弟姐妹的情况下

<a class="uibutton confirm addClient" href="javascript:void(0);">ADD Client</a>
<input type="text" placeholder="Enter client name" style="margin: 5px;float: right" class="clientsearch large" />
<select class="mychzn-select clientList">
  <option value="">Select Client name....</option>
  <option value="1">abc</option>
</select>


 /*jQuery*/
 $(this).siblings('select').children(':selected').text()

13赞 Nikul 4/11/2015 #17

$('#id').find('option:selected').text();

41赞 Mohammed Shaheen MK 5/14/2015 #18

使用这个

const select = document.getElementById("yourSelectId");

const selectedIndex = select.selectedIndex;
const selectedValue = select.value;
const selectedText = select.options[selectedIndex].text;

然后，您可以在和中获取所选值和文本。selectedValueselectedText

7赞 Mhandzkie 7/9/2015 #19

这项工作对我来说：

$("#city :selected").text();

我正在使用 jQuery 1.10.2

81赞 Prabhagaran 8/14/2015 #20

这对我有用

$("#dropdownid").change(function() {
    alert($(this).find("option:selected").text());
});

如果元素是动态创建的

$(document).on("change", "#dropdownid", function() {
    alert($(this).find("option:selected").text());
});

8赞 Mohammad Dayyan 9/17/2015 #21

以下内容对我有用：

$.trim($('#dropdownId option:selected').html())

13赞 Sandeep Shekhawat 11/19/2015 #22

在jQuery中选择文本和下拉列表/选择更改事件中的所选值

$("#yourdropdownid").change(function() {
    console.log($("option:selected", this).text()); //text
    console.log($(this).val()); //value
})

13赞 Mojtaba 1/23/2016 #23

要获取选定值，请使用

$('#dropDownId').val();

要获取所选项目文本，请使用以下行：

$("#dropDownId option:selected").text();

6赞 Bhanu Pratap 8/10/2016 #24

$(function () {
  alert('.val() = ' + $('#selectnumber').val() + '  AND  html() = ' + $('#selectnumber option:selected').html() + '  AND .text() = ' + $('#selectnumber option:selected').text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <title></title>

  </head>
  <body>
    <form id="form1" runat="server">
      <div>
        <select id="selectnumber">
          <option value="1">one</option>
          <option value="2">two</option>
          <option value="3">three</option>
          <option value="4">four</option>
        </select>

      </div>
    </form>
  </body>
</html>

12赞 Kalaivani M 1/4/2017 #25

var e = document.getElementById("dropDownId");
var div = e.options[e.selectedIndex].text;

14赞 Vishal Thakur 3/9/2017 #26

尝试：

$var = jQuery("#dropdownid option:selected").val();
   alert ($var);

或者，要获取选项的文本，请使用：text()

$var = jQuery("#dropdownid option:selected").text();
   alert ($var);

更多信息：

14赞 Muddasir23 11/13/2018 #27

只需尝试以下代码即可。

var text= $('#yourslectbox').find(":selected").text();

它返回所选选项的文本。

13赞 shyamm 12/17/2019 #28

$("#dropdown").find(":selected").text();


$("#dropdown :selected").text();

$("#dropdown option:selected").text();

$("#dropdown").children(":selected").text();

6赞 Kamil Kiełczewski 1/18/2020 #29

尝试

dropdown.selectedOptions[0].text

function read() {
  console.log( dropdown.selectedOptions[0].text );
}

<select id="dropdown">
  <option value="1">First</option>
  <option value="2">Second</option>
</select>
<button onclick="read()">read</button>

1赞 Daniel Tonon 4/22/2020

感谢您提供纯 JS 方法。

18赞 Naveenbos 2/14/2020 #30

这段代码对我有用。

$("#yourdropdownid").children("option").filter(":selected").text();

0赞 Leffa 4/23/2022

也有效！如果有像你这样的scape caracteres，可以添加这样的内容：\n \t.trim()$("#yourdropdownid").children("option").filter(":selected").text().trim();

上一个：检测 DOM 中的更改

下一个：如何找出哪个 DOM 元素具有焦点？

使用 jQuery 从下拉列表（选择框）中获取所选文本

Get selected text from a drop-down list (select box) using jQuery

评论

评论

评论

评论

评论

评论