120

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***?

9 Answers 9

144

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

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

1
  • 1
    This selector provides a jQ object, so add .text() gets its text [$("option:selected", this).text()]
    – gordon
    Dec 4, 2021 at 0:23
133
 $(this).find('option:selected').text();
1
  • 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 4, 2016 at 21:30
65

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();
});
3
49
var cur_value = $('option:selected',this).text();
1
  • 1
    Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. Apr 3, 2016 at 3:32
14

This should work:

$(this).find('option:selected').text();
2
  • Same answer as above Dec 5, 2017 at 19:10
  • 1
    Posted within the same minute!
    – lharby
    Oct 17, 2018 at 14:59
9

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

4
  • Where do you get option-selected with no quotes...? Apr 4, 2012 at 13:14
  • That was a typo when I posted. Corrected the answer.
    – thomthom
    Apr 4, 2012 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 4, 2012 at 13:20
  • option:selected has been there since v1.0 api.jquery.com/selected-selector
    – thomthom
    Apr 4, 2012 at 13:24
1

It's just

$(this).val();

I think jQuery is clever enough to know what you need

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...

1
  • Maybe what you really meant was var cur_value = $(this).children('option:selected').text(); Oct 18, 2018 at 16:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.