How to get the text of the selected value of a dropdown list?

Question

Possible Duplicate:
jQuery get specific option tag text
How to get the text of the selected option of a select using jquery?

I have a dropdown list and I want to know the text of the selected item. For example:

<select>
    <option value="1">Volvo</option>
    <option value="2">Saab</option>
    <option value="3">Mercedes</option>
</select>

If I know the selected value, how can I get it's text value? For instance, if the value is 1 how can I get Volvo?

Help much appreciated.

Rory McCrossan · Accepted Answer · 2017-12-06T08:34:14.907

34

You can use option:selected to get the chosen option of the select element, then the text() method:

$("select option:selected").text();

Here's an example:

console.log($("select option:selected").text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select>
    <option value="1">Volvo</option>
    <option value="2" selected="selected">Saab</option>
    <option value="3">Mercedes</option>
</select>

edited Dec 06 '17 at 08:34

answered May 02 '12 at 10:04

Rory McCrossan

331,213
40
305
339

Then you can add links to each jQuery function in the docs... Anyway I dislike the way it's done in his edit. It can be simpler with `$("select).val()`. as I said, up to you. and +1 by the way. – gdoron May 02 '12 at 10:22
ok i coded `alert($("#presetname-"+rname+" option:selected").text());` but it has an error. Any idea why it is not working..? – guitarlass May 02 '12 at 10:46
What's the error, and what value does `rname` have? – Rory McCrossan May 02 '12 at 10:47
it says `illegal character`. `rname` is just a string value. – guitarlass May 02 '12 at 10:57
Works fine thanks. – Macfer Ann Jun 09 '17 at 07:22

score 15 · Answer 2 · edited Oct 06 '16 at 08:27

15

$("#select_id").find("option:selected").text();

It is helpful if your control is on Server side. In .NET it looks like:

$('#<%= dropdownID.ClientID %>').find("option:selected").text();

edited Oct 06 '16 at 08:27

Vikrant

4,920
17
48
72

answered May 02 '12 at 10:06

neohope

1,822
15
29

score 2 · Answer 3 · answered May 02 '12 at 10:18

Hi if you are having dropdownlist like this

<select id="testID">
<option value="1">Value1</option>
<option value="2">Value2</option>
<option value="3">Value3</option>
<option value="4">Value4</option>
<option value="5">Value5</option>
<option value="6">Value6</option>
</select>
<input type="button" value="Get dropdown selected Value" onclick="getHTML();">

after giving id to dropdownlist you just need to add jquery code like this

function getHTML()
{
      var display=$('#testID option:selected').html();
      alert(display);
}

score 1 · Answer 4 · answered May 02 '12 at 10:06

1

The easiest way is through css3 $("select option:selected") and then use the .text() or .html() function. depending on what you want to have.

answered May 02 '12 at 10:06

Neysor

3,893
11
34
66

2

CSS3? Where does that come into it? – Rory McCrossan May 02 '12 at 10:07
Indeed, `:selected` is not CSS3, it's one of the jQuery selector enhancments. – T.J. Crowder May 02 '12 at 10:12
1

_"Because `:selected` is a jQuery extension and not part of the CSS specification, queries using `:selected` cannot ... ..."_ [source](http://api.jquery.com/selected-selector/) – gdoron May 02 '12 at 10:14
oh thanks for this correction! i thought :selected and :checked are css3 pseudo classes. And i know that jquery is just [borrowing](http://api.jquery.com/category/selectors/) css selectors :) – Neysor May 02 '12 at 10:15

How to get the text of the selected value of a dropdown list?

4 Answers4

Linked

Related