Add the "selected" attribute to a drop down option with jQuery

Question

How do I add the attribute "selected" to a drop down menu option based on that option matching some variable?

Here is how the dropdown is populated...

loginOptions = ["First", "Second", "Third"];
        var Login = $( '#Login' );

        for ( var i = 0; i < loginOptions.length; i++ ) {
            Login.append('<option value="'+ loginOptions[i] +'">'+             loginOptions[i] +'</option>');
        }

I want to mark one option as "selected" based on whether or not its value matches another variable. so if loginOption[i] is equal to var existingLoginValue then set that option to 'selected'

Something that would do

if(loginOptions[i] === existingLoginValue){ print 'selected'; };

Thanks!

Nick Craver · Accepted Answer · 2010-03-11T20:10:08.433

7

I'd use .val() at the end of your method, this sets based on value, like this:

$('#Login').val(existingLoginValue);

Similarly, to get the value, call it without any parameters like this:

var currentValue = $('#Login').val();

edited Mar 11 '10 at 20:10

answered Mar 11 '10 at 20:05

Nick Craver

623,446
136
1,297
1,155

That's a great solution. Wish I'd have thought of that rather than wasting time playing around with setting selected. Thanks! – rg88 Mar 11 '10 at 20:24

score 1 · Answer 2 · edited May 23 '17 at 11:55

If you only want to do one value then yeah, the val() works. Otherwise, you can also do this:

$option=$('<option value="'+ loginOptions[i] +'">'+ loginOptions[i]+'</option>').appendTo(Login);
if (loginOptions[i] == existingLoginValue) {
    $option.attr('selected',true)    
}

er, someone pointed out this doesn't really make sense since that would imply multiple options with the same value. I meant to write something like this:

existingLoginValues = ['foo','bar']
$option=$('<option value="'+ loginOptions[i] +'">'+ loginOptions[i]+'</option>').appendTo(Login);
if (existingLoginValues.indexOf(loginOptions[i]) != -1) {
    $option.attr('selected',true)    
}

the indexOf function is supported in most browsers except (of course) IE6. See "Best way to find an item in a JavaScript Array?"

...When would you have 2 options with the same exact value? In his code there are 3 distinct options. — Nick Craver, Mar 11 '10 at 20:12

score 0 · Answer 3 · edited Nov 15 '12 at 01:05

0

Use

$('#Login').selectedIndex = i

edited Nov 15 '12 at 01:05

Luca

9,259
5
46
59

answered Mar 11 '10 at 20:07

Artsiom Anisimau

1,139
3
11
26

Add the "selected" attribute to a drop down option with jQuery

3 Answers3

Linked