How to get $(this) selected option in jQuery?

Question

The following code works:

$("#select-id").change(function(){
  var cur_value = $('#select-id option:selected').text();
  . . .
});

How to refactor the second line to:

var cur_value = $(this).***option-selected***.text();

What do you use for ***option-selected***?

score 142 · Answer 1 · answered Apr 04 '12 at 13:13

142

For the selected value: $(this).val()

If you need the selected option element, $("option:selected", this)

answered Apr 04 '12 at 13:13

jorgebg

6,560
1
22
31

1

This selector provides a jQ object, so add `.text()` gets its text [`$("option:selected", this).text()`] – gordon Dec 04 '21 at 00:23

user56reinstatemonica8 · Answer 2 · 2013-06-11T09:00:11.530

132

 $(this).find('option:selected').text();

edited Jun 11 '13 at 09:00

answered Apr 04 '12 at 13:12

user56reinstatemonica8

32,576
21
101
125

This worked perfectly for me - I tried `$("option:selected", this)` as mentioned above but that was problematic. I was using a button click to append the selected option element text to another div, but when I clicked the button, it actually changed the selected element... weird. Use this one. – skwidbreth Apr 04 '16 at 21:30

score 64 · Answer 3 · answered Dec 12 '14 at 10:00

64

Best and shortest way in my opinion for onchange events on the dropdown to get the selected option:

$('option:selected',this);

to get the value attribute:

$('option:selected',this).attr('value');

to get the shown part between the tags:

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

In your sample:

$("#select-id").change(function(){
  var cur_value = $('option:selected',this).text();
});

answered Dec 12 '14 at 10:00

angelmedia

957
8
10

1

Don't use `.context`, it is deprecated since jQuery 1.10 - http://api.jquery.com/category/deprecated/deprecated-1.10/ – r4fx Mar 10 '15 at 15:57
Yep, but what you mean is this: http://api.jquery.com/context/ $( "ul", document.body ).context.nodeName which i don´t use – angelmedia Mar 12 '15 at 06:15
1

I like the answer but why it is best ? – Sébastien Gicquel Oct 10 '16 at 14:06

score 49 · Answer 4 · edited Apr 03 '16 at 03:22

49

var cur_value = $('option:selected',this).text();

edited Apr 03 '16 at 03:22

Ghasem

14,455
21
138
171

answered Apr 03 '16 at 03:16

Satyam Khatri

642
5
4

1

Whilst this may theoretically answer the question, [it would be preferable](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – Enamul Hassan Apr 03 '16 at 03:32

score 14 · Answer 5 · edited Apr 04 '12 at 13:15

14

This should work:

$(this).find('option:selected').text();

edited Apr 04 '12 at 13:15

Code Maverick

20,171
12
62
114

answered Apr 04 '12 at 13:12

He Shiming

5,710
5
38
68

Same answer as above – Hugh Seagraves Dec 05 '17 at 19:10
1

Posted within the same minute! – lharby Oct 17 '18 at 14:59

score 9 · Answer 6 · answered Apr 04 '12 at 13:13

You can use find to look for the selected option that is a descendant of the node(s) pointed to by the current jQuery object:

var cur_value = $(this).find('option:selected').text();

Since this is likely an immediate child, I would actually suggest using .children instead:

var cur_value = $(this).children('option:selected').text();

score 7 · Answer 7 · answered Apr 04 '12 at 13:13

7

var cur_value = $(this).find('option:selected').text();

Since option is likely to be immediate child of select you can also use:

var cur_value = $(this).children('option:selected').text();

http://api.jquery.com/find/

answered Apr 04 '12 at 13:13

thomthom

2,854
1
23
53

Where do you get `option-selected` with no quotes...? – Platinum Azure Apr 04 '12 at 13:14
That was a typo when I posted. Corrected the answer. – thomthom Apr 04 '12 at 13:17
`find('option:selected')` returns an empty string for me. What version of jQuery is required? I am working in 1.6.1. `children('option:selected')` does work. – B Seven Apr 04 '12 at 13:20
`option:selected` has been there since v1.0 http://api.jquery.com/selected-selector/ – thomthom Apr 04 '12 at 13:24

score 1 · Answer 8 · edited Jun 12 '20 at 18:48

1

It's just

$(this).val();

I think jQuery is clever enough to know what you need

edited Jun 12 '20 at 18:48

David Buck

3,752
35
31
35

answered Jun 12 '20 at 16:05

Edmund Adjei

91
10

score 0 · Answer 9 · answered Apr 04 '12 at 13:13

0

Best guess:

var cur_value = $('#select-id').children('option:selected').text();

I like children better in this case because you know you're only going one branch down the DOM tree...

answered Apr 04 '12 at 13:13

Thierry Blais

2,848
22
41

Maybe what you really meant was var cur_value = $(this).children('option:selected').text(); – Joe Johnston Oct 18 '18 at 16:06

How to get $(this) selected option in jQuery?

9 Answers9

Linked