使用jQuery从下拉列表(选择框)中获取选定的文本


2302

如何从jQuery 的下拉列表中获取选定的文本(而不是选定的值)?


12
只是我的两分钱:“ ASP”下拉菜单并不特殊;这只是很好的旧HTML。:-)
ankush981


有关香草JavaScript方式的信息,请参见stackoverflow.com/a/5947/32453
rogerdpack

只是$(this).prop('selected',true); 将.att替换为.prop,它适用于所有浏览器
Shahid Hussain Abbasi,

Answers:


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

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

42
我第二个评论是is()返回一个布尔值;或者,使用以下小的更改:$('#yourdropdownid')。children(“ option:selected”)。text();
scubbo 2012年

25
经过测试的@ DT3 is("selected").text()返回TypeError: Object false has no method 'text'
ianace 2012年

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

3
$(“#IdSelect”)。children(“ option:selected”)。text()
JD-DC TECH

266

尝试这个:

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

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

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

对于我来说,这里的ASP.NET版本是唯一与asp.net一起使用的Jquery,因此,我同意了该版本。这其中:('$( “#yourdropdownid选项:选择”)文本();'没有使用母版页在一个asp.net页面的工作。
netfed

5
它不起作用,因为asp.net母版页在选择器前面抛出了随机字符。从技术上讲,它正在寻找类似内容("#ct0001yourdropdownid)
CSharper


1
@CSharper-我认为说ASP.NET 抛出随机字符会产生误导。它们根本不是随机的,它们是结构性的,并遵循严格的规则(基于是否将ID控件放在控件上,如果不是,则基于它们在树的当前层中的位置的索引等)。 )
自由下落者,2017年

嗨,您如何在表格行/单元格中执行此操作,如何知道表格中的哪个下拉列表,尤其是在ASP MVC 5中
转换器

215

例如,此处发布的答案,

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

不适用于我,但这确实:

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

它可能是jQuery的旧版本。


7
不要讨厌这个答案。使用“ find”关键字对我有用。我来自完全不同的环境。
ROFLwTIME 2012年

5
您根本不需要选项部分,因为它与selected隐含在一起。.只需使用$('#yourdropdownid:selected')。text(); 会正常工作
Dss

jquery-1.10.2.min,这个为我工作,而不是其他人。
kubilay 2014年

流行的答案有效,但是我需要在已经获得的精选参考中使用它,所以这对我来说是最佳答案
Graham


67

这对我有用

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

如果元素是动态创建的

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


55

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


37
不完全是问题的答案,但对我很有用。问题要选择文本。
彼得


42

对于所选项目的文本,请使用:

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

对于所选项目的值,请使用:

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

33

各种方式

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

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

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

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

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

这就是我期待的$(this) ajax通话之后的结果
Shantaram Tupe

您也可以执行$(“ option:selected”,this).text()而不将其包装在JQuery对象中。
Doug F

28

用这个

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

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

然后,您在selectedValue和中获得所选的值和文本selectedText


1
支持,因为这是不使用jQuery的唯一答案。
贾斯汀·莱瑟德

我喜欢香草js。非常感谢。
EnriqueBermúdez

27
var someName = "Test";

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

这将帮助您获得正确的方向。如果您需要进一步的帮助,请对上述代码进行全面测试。


19

对于那些正在使用SharePoint列表并且不想使用生成的长ID的用户,这将起作用:

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

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

而是#selectID可以使用任何jQuery选择器,而不是.selectClass使用类。

如文档中提到这里

:selected选择器适用于<option>元素。它不适用于复选框或单选输入。使用:checked他们。

.text()根据此处的文档。

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

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

请参阅文档以获取更深入的说明。



13

为了获得选择的价值,请使用

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

为了获得选定的项目文本,请使用以下行:

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


11

选择文本并在jQuery中的下拉/选择更改事件上选择值

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

10

只需尝试以下代码。

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

它返回所选选项的文本。






7

在同级情况下

<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()

7

$(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>

单击以查看输出屏幕


嗨,您如何在表格行/单元格中执行此操作,如何知道表格中的哪个下拉列表?我正在尝试进行ajax调用以获取和填充值,我可以在页面外部进行此操作,但不能在表格行内部进行此操作……您能添加一些帮助吗
变压器


4

如果要将结果作为列表,请使用:

x=[];
$("#list_id").children(':selected').each(function(){x.push($(this).text());})

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


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

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

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

确实解释了为什么这样做有效
jwenting

2

这段代码对我有用。

$("#yourdropdownid").children("option").filter(":selected").text();
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.