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

前端 未结 30 1733
南方客
南方客 2020-11-21 15:58

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

相关标签:
30条回答
  • 2020-11-21 16:28

    This work for me:

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

    I'm using jQuery 1.10.2

    0 讨论(0)
  • 2020-11-21 16:30
     $("#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.

    0 讨论(0)
  • 2020-11-21 16:30

    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:

    • http://api.jquery.com/val/
    • http://api.jquery.com/text/
    0 讨论(0)
  • 2020-11-21 16:30

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

    0 讨论(0)
  • 2020-11-21 16:30

    For multi-selects:

    $("#yourdropdownid :selected").map(function(i, v) { return $.trim($(v).text()); }
    
    0 讨论(0)
  • 2020-11-21 16:31

    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()
    
    0 讨论(0)
提交回复
热议问题