妄徒之命
2009-10-29 12:02
采纳率: 25%
浏览 410

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

How can I get the selected text (not the selected value) from a drop-down list in jQuery?

转载于:https://stackoverflow.com/questions/1643227/get-selected-text-from-a-drop-down-list-select-box-using-jquery

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

29条回答 默认 最新

  • larry*wei 2009-10-29 12:05
    已采纳
    $("#yourdropdownid option:selected").text();
    
    打赏 评论
  • 斗士狗 2009-10-29 12:04

    Try this:

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

    For an ASP.NET dropdown you can use the following selector:

    $("[id*='MyDropDownId'] :selected")
    
    打赏 评论
  • lrony* 2010-10-07 10:09
    var someName = "Test";
    
    $("#<%= ddltest.ClientID %>").each(function () {
        $('option', this).each(function () {
            if ($(this).text().toLowerCase() == someName) {
                $(this).attr('selected', 'selected')
            };
        });
    });
    

    That will help you to get right direction. Above code is fully tested if you need further help let me know.

    打赏 评论
  • 喵-见缝插针 2011-08-16 17:56
    $("option:selected", $("#TipoRecorde")).text()
    
    打赏 评论
  • ℙℕℤℝ 2011-11-14 09:22

    $("#DropDownID").val() will give the selected index value.

    打赏 评论
  • ~Onlooker 2012-02-04 05:17

    If you already have the dropdownlist available in a variable, this is what works for me:

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

    The other answers on this question helped me, but ultimately the jQuery forum thread $(this + "option:selected").attr("rel") option selected is not working in IE helped the most.

    Update: fixed the above link

    打赏 评论
  • 斗士狗 2012-03-19 11:41

    The answers posted here, for example,

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

    didn't work for me, but this did:

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

    It is possibly an older version of jQuery.

    打赏 评论
  • lrony* 2013-01-24 23:22

    For the text of the selected item, use:

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

    For the value of the selected item, use:

    $('select[name="thegivenname"] option:selected').val();
    
    打赏 评论
  • larry*wei 2013-04-23 10:04
    $("select[id=yourDropdownid] option:selected").text()
    

    This works fine

    打赏 评论
  • Memor.の 2013-09-25 07:36

    This works for me:

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

    jQuery version: 1.9.1

    打赏 评论
  • 10.24 2013-11-05 21:38

    For those who are using SharePoint lists and don't want to use the long generated id, this will work:

    var e = $('select[title="IntenalFieldName"] option:selected').text();
    
    打赏 评论
  • 喵-见缝插针 2014-01-30 14:29
     $("#selectID option:selected").text();
    

    Instead of #selectID you can use any jQuery selector, like .selectClass using class.

    As mentioned in the documentation here.

    The :selected selector works for <option> elements. It does not work for checkboxes or radio inputs; use :checked for them.

    .text() As per the documentation here.

    Get the combined text contents of each element in the set of matched elements, including their descendants.

    So you can take text from any HTML element using the .text() method.

    Refer the documentation for a deeper explanation.

    打赏 评论
  • 乱世@小熊 2014-02-01 05:55
    $("#dropdownID").change(function(){
      alert($('option:selected', $(this)).text());
    });
    
    打赏 评论
  • ℡Wang Yan 2014-07-31 15:11

    Use:

    ('#yourdropdownid').find(':selected').text();
    
    打赏 评论
  • hurriedly% 2014-08-03 19:39

    Various ways

    1. $("#myselect option:selected").text();
    
    2. $("#myselect :selected").text();
    
    3. $("#myselect").children(":selected").text();
    
    4. $("#myselect").find(":selected").text();
    
    打赏 评论
  • 谁还没个明天 2014-12-05 06:33

    In sibling case

    <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()
    
    打赏 评论
  • 妄徒之命 2015-04-11 09:39
    $('#id').find('option:selected').text();
    
    打赏 评论
  • elliott.david 2015-05-14 14:21

    Please use this

    var listbox = document.getElementById("yourdropdownid");
    var selIndex = listbox.selectedIndex;
    var selValue = listbox.options[selIndex].value;
    var selText = listbox.options[selIndex].text;   
    

    Then Please alert "selValue" and "selText". You get your selected dropdown value and text

    打赏 评论
  • lrony* 2015-07-09 02:00

    This work for me:

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

    I'm using jQuery 1.10.2

    打赏 评论
  • 谁还没个明天 2015-08-14 11:12

    This works for me

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

    If the element created dynamically

    $(document).on("change", "#dropdownid", function() {
        alert($(this).find("option:selected").text());
    });
    
    打赏 评论
  • python小菜 2015-09-17 05:13

    the following worked for me:

    $.trim($('#dropdownId option:selected').html())
    
    打赏 评论
  • YaoRaoLov 2015-11-19 05:36

    Select Text and selected value on dropdown/select change event in jQuery

    $("#yourdropdownid").change(function() {
        console.log($("option:selected", this).text()); //text
        console.log($(this).val()); //value
    })
    
    打赏 评论
  • 三生石@ 2016-01-23 09:07

    For getting selected value use

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

    and for getting selected item text use this line:

    $("#dropDownId option:selected").text();
    
    打赏 评论
  • derek5. 2016-08-09 17:01

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

    Click to see OutPut Screen

    </div>
    
    打赏 评论
  • 北城已荒凉 2017-01-04 12:53
    var e = document.getElementById("dropDownId");
    var div = e.options[e.selectedIndex].text;
    
    打赏 评论
  • 胖鸭 2017-01-18 21:56

    If you want the result as a list, then use:

    x=[];
    $("#list_id").children(':selected').each(function(){x.push($(this).text());})
    
    打赏 评论
  • perhaps? 2017-03-09 07:03

    Try:

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

    Or to get the text of the option, use text():

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

    More Info:

    打赏 评论
  • 北城已荒凉 2018-03-15 22:21

    For multi-selects:

    $("#yourdropdownid :selected").map(function(i, v) { return $.trim($(v).text()); }
    
    打赏 评论
  • 7*4 2018-05-21 11:01
    $("#dropdownid option:selected").text();
    

    if you use asp.net and write

    <Asp:dropdownlist id="ddl" runat="Server" />
    

    then you should use

    $('#<%=ddl.Clientid%> option:selected').text();
    
    打赏 评论