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

Answer 1

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

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

This should work:

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

Answer 6

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

Answer 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/