javascript - change - set selected value of dropdown in jquery

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

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

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


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

For multi-selects:

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

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

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


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

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

This work for me:

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

I'm using jQuery 1.10.2

This works for me:


jQuery version: 1.9.1

Try this:

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

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

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

Various ways

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

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

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

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

the following worked for me:

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

  alert($('option:selected', $(this)).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();

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

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

This works fine

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

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.