javascriptjquerydomdrop-down-menujquery-selectors

Reputation: 25675

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

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

Upvotes: 2546

Answers (30)

Dhia Shalabi

Reputation: 1540

$("#dropdownid").change(function(el) {
    console.log(el.value);
});

Or you can use this

$("#dropdownid").change(function() {
    console.log($(this).val());
});

Upvotes: -1

Naveenbos

Reputation: 2562

This code worked for me.

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

Upvotes: 21

Kamil Kiełczewski

Reputation: 92667

Try

dropdown.selectedOptions[0].text

function read() {
  console.log( dropdown.selectedOptions[0].text );
}

<select id="dropdown">
  <option value="1">First</option>
  <option value="2">Second</option>
</select>
<button onclick="read()">read</button>

Upvotes: 7

shyamm

Reputation: 560

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


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

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

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

Upvotes: 17

Mohammed Shaheen MK

Reputation: 1219

Use this

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

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

Then you get your selected value and text inside selectedValue and selectedText.

Upvotes: 41

Shahid Hussain Abbasi

Reputation: 2692

Just add the below line

$(this).prop('selected', true);

replaced .att to .prop it worked for all browsers.

Upvotes: 0

Muddasir23

Reputation: 602

Simply try the following code.

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

it returns the text of the selected option.

Upvotes: 14

Manish Singh

Reputation: 1024

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

Upvotes: 5

Curtis Yallop

Reputation: 7329

For multi-selects:

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

Upvotes: 2

Prabhagaran

Reputation: 3710

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

Upvotes: 84

Vishal Thakur

Reputation: 1696

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:

Upvotes: 14

max

Reputation: 10464

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

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

Upvotes: 4

Kalaivani M

Reputation: 1300

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

Upvotes: 12

Bhanu Pratap

Reputation: 1761

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

Upvotes: 6

vineet

Reputation: 14246

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

Upvotes: 7

Kamrul

Reputation: 7311

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

Upvotes: 44

Sandeep Shekhawat

Reputation: 695

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

Upvotes: 13

Kirk Liemohn

Reputation: 7943

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

Upvotes: 122

Mojtaba

Reputation: 514

For getting selected value use

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

and for getting selected item text use this line:

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

Upvotes: 13

Mohammad Dayyan

Reputation: 22458

the following worked for me:

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

Upvotes: 8

Mhandzkie

Reputation: 209

This work for me:

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

I'm using jQuery 1.10.2

Upvotes: 7

Nikul

Reputation: 1025

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

Upvotes: 13

F. M.

Reputation: 509

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

Upvotes: 20

Nikhil Agrawal

Reputation: 26538

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

Upvotes: 17

Binita Bharati

Reputation: 5918

This works for me:

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

jQuery version: 1.9.1

Upvotes: 56

JYX

Reputation: 2663

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.

Upvotes: 239

kishore

Reputation: 1748

Use:

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

Upvotes: 9

MD SHAHIDUL ISLAM

Reputation: 14523

Various ways

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

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

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

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

Upvotes: 35

NiiL

Reputation: 2827

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

Upvotes: 32

Thangamani Palanisamy

Reputation: 5300

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

This works fine

Upvotes: 16

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

Answers (30)

Related Questions