get selected option of $(this)

Question

if i am looping through some jquery objects that are select dropdowns, how can I get the class of the selected option using jquery's $(this)?

elems.each(function(idx, elem) {
    if ($(this).is('select')){
        console.log($(this, "option:selected"))
    }
});

does not seem to work.

What are you trying to do in `console.log`? Print the value of selected option? — Selvakumar Arumugam, Dec 17 '12 at 18:31
I think you are looking for hasClass http://api.jquery.com/hasClass/ Or if you want to get the classes of $(this) take a look at http://stackoverflow.com/questions/2400386/get-class-name-using-jquery — Peter Rasmussen, Dec 17 '12 at 18:32

score 5 · Accepted Answer · answered Dec 17 '12 at 18:36

5

elems.each(function(idx, elem) {
    var ref = $(this); // caching $(this)
    if( ref.is('select') ) {
        console.log( ref.find('option:selected') );

        // OR in jQuery Context format
        console.log( $('option:selected', ref) ); // this format internally 
                                                  // called .find() method

        // to get the class
        console.log( ref.find('option:selected').attr('class') );
    }
});

answered Dec 17 '12 at 18:36

thecodeparadox

86,271
21
138
164

Thank you. I'm sorry for this late response. What is the purpose of caching `$(this)`. – 1252748 Dec 18 '12 at 20:36
@thomas cause each time you use `$(this)`, it will call function `$()` and need processing. so why the caching. `:)` – thecodeparadox Dec 19 '12 at 05:59
yikes. that is something i did not know. thank you very much! – 1252748 Dec 19 '12 at 16:13

score 3 · Answer 2 · answered Dec 17 '12 at 18:35

You are almost there except that the order in which you have passed the argument are not correct. See below,

elems.each(function(idx, elem) {
    if ($(elem).is('select')){
        console.log($("option:selected", elem));
    }
});

$("option:selected", this) in which the first argument is the selector and 2nd argument is the context.

Note: The .each 2nd argument is the element itself, so you can use elem instead of this

DEMO: http://jsfiddle.net/MUC6H/1/

Rafay · Answer 3 · 2012-12-17T18:36:37.360

2

how can I get the class of the selected option

if ($(this).is('select')){
        console.log($(this).find("option:selected").attr("class"));
    }

http://jsfiddle.net/DWEY4/

edited Dec 17 '12 at 18:36

answered Dec 17 '12 at 18:31

Rafay

30,950
5
68
101

5

who is downvoting both these answers and not supplying a comment ?? – Mark Pieszak - Trilon.io Dec 17 '12 at 18:35

score -1 · Answer 4 · answered Dec 17 '12 at 18:31

Have you tried the hasClass function?

elems.each(function(idx, elem) {
    if ($(this).hasClass('select')){
        console.log($(this, "option:selected"))
    }
});

Looking at it further, i think your original method will work too if you add a . class identifier

elems.each(function(idx, elem) {
    if ($(this).is('.select')){
        console.log($(this, "option:selected"))
    }
});

get selected option of $(this)

4 Answers4