Get text of the selected option with jQuery

Question

I have a select box with some values. How do I get the selected options text, not the value?

<select name="options[2]" id="select_2">
    <option value="">-- Please Select --</option>
    <option value="6" price="0">100</option>
    <option value="7" price="0">125</option>
    <option value="8" price="0">150</option>
    <option value="9" price="0">175</option>
    <option value="10" price="0">200</option>
    <option value="3" price="0">25</option>
    <option value="4" price="0">50</option>
    <option value="5" price="0">75</option>
</select>

I tried this:

$j(document).ready(function(){
    $j("select#select_2").change(function(){
        val = $j("select#select_2:selected").text();
        alert(val);
    });
});

But it's coming back with undefined.

score 73 · Accepted Answer · answered Jun 23 '11 at 12:34

73

Close, you can use

$('#select_2 option:selected').html()

answered Jun 23 '11 at 12:34

JohnP

49,507
13
108
140

1

Will $('#select_2 :selected').html() also works? – Jose Faeti Jun 23 '11 at 12:47
@JoseFaeti apparently, yes : http://jsfiddle.net/jomanlk/kcWQw/7/ – JohnP Jun 23 '11 at 12:51
2

Keep in mind that $('#select_2').find('option:selected').html() will be more efficient ;). – Archangel Sep 22 '15 at 12:44
@Archangel Out of curiosity, in what way will that be more efficient? – Damian Sep 23 '15 at 12:13
@Damian It will first narrow the search drastically with the id selector and then find the selected option. It might be the same thing in this particular case but it's a good reflex to have in other ones. – Archangel Sep 23 '15 at 13:18
1

@Archangel Fair enough, it's just your original comment sounded like it would be a more efficient for this example, which if it is would be negligible at best as they essentially do the same thing. Using `.find()` can be beneficial (like in a scenario I had earlier today) but from my experience it's more of a circumstantial method to use as it's rare that I need to use it as there are usually better ways. – Damian Sep 23 '15 at 15:59
1

@Damian I agree with you. Actually I should have specify that it would be "usually" more efficient but not always. – Archangel Sep 24 '15 at 07:56
@Archangel yup that solved my problem too, find() gives us only selected Html/text of given id where the posted solution gives all the Html/text associated with that id. – B-shan Jan 06 '20 at 18:58
@B-shan Only replying to this because of the confusing downvote. The posted solution works just fine and only returns the HTML of the selected option, not all HTML associated with that ID (as you mention). This fiddle is evidence of it - http://jsfiddle.net/jomanlk/kcWQw/7/ . User Archangel's comment doesn't change anything in the solution as it's functionally the same solution. – JohnP Jan 07 '20 at 04:57
@JohnP that was by mistake I tried to undo it but it's saying answer needs to be edited as the vote is locked, sorry for the inconvenience that wasn't intentional. – B-shan Jan 07 '20 at 05:57
@B-shan That's alright then – JohnP Jan 07 '20 at 10:28

score 27 · Answer 2 · edited Jul 31 '15 at 12:07

27

$(document).ready(function() {
    $('select#select_2').change(function() {
        var selectedText = $(this).find('option:selected').text();
        alert(selectedText);
    });
});

Fiddle

edited Jul 31 '15 at 12:07

RevanthKrishnaKumar V.

1,855
1
21
34

answered Feb 18 '14 at 08:15

bancer

7,475
7
39
58

this is the most elegant one...especially when you have the select as an object – MYNE Aug 23 '15 at 14:23
When you've assigned your select to a variable, e.g. `foo = $('#select2)` this is the variation to use, as in `foo.find('option:selected').text()` – rbb Mar 02 '20 at 20:21

score 13 · Answer 3 · answered Jun 23 '11 at 12:35

13

Change your selector to

val = j$("#select_2 option:selected").text();

You're selecting the <select> instead of the <option>

answered Jun 23 '11 at 12:35

Björn

2,638
16
18

score 4 · Answer 4 · answered Aug 22 '13 at 15:20

4

Also u can consider this

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

which might be a little faster solution though I am not sure.

answered Aug 22 '13 at 15:20

user1278890

643
8
22

score 1 · Answer 5 · answered Jun 23 '11 at 12:36

You could actually put the value = to the text and then do

$j(document).ready(function(){
    $j("select#select_2").change(function(){
        val = $j("#select_2 option:selected").html();
        alert(val);
    });
});

Or what I did on a similar case was

<select name="options[2]" id="select_2" onChange="JavascriptMethod()">
  with you're options here
</select>

With this second option you should have a undefined. Give me feedback if it worked :)

Patrick

Get text of the selected option with jQuery

5 Answers5

Linked

Related