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

dropdown option (25)

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


the following worked for me:

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



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

$(function () {
  alert('.val() = ' + $('#selectnumber').val() + '  AND  html() = ' + $('#selectnumber option:selected').html() + '  AND .text() = ' + $('#selectnumber option:selected').text());
<script src=""></script>
<html xmlns="">
  <head runat="server">

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


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

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

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

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

if you use and write

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

then you should use

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

This works for me:


jQuery version: 1.9.1

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


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

For getting selected value use


and for getting selected item text use this line:

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

  alert($('option:selected', $(this)).text());

This work for me:

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

I'm using jQuery 1.10.2

For multi-selects:

$("#yourdropdownid :selected").map(function(i, v) { return $.trim($(v).text()); }

This works for me

$("#dropdownid").change(function() {

If the element created dynamically

$(document).on("change", "#dropdownid", function() {

 $("#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.

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

Various ways

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

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

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

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

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>


The answers posted here, for example,

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

didn't work for me, but this did:


It is possibly an older version of jQuery.

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

This works fine




var url='';
$(location).prop('href',url);//instead of location you can use window

javascript jquery drop-down-menu jquery-selectors