jQuery: set selected value of dropdown list?

Question

What's wrong with this code?

jQuery

$(document).ready(function() { $("#routetype").val('quietest'); )};

HTML

<select id="routetype" name="routetype"> <option value="fastest">Fastest</option> <option selected="true" value="balanced">Balanced</option> <option value="quietest">Quietest</option> </select>

Fiddle

It gives me 'Balanced' as the selected option, not 'Quietest'.

You need to select jQuery in the dropdown on the left and you have a syntax error because the $(document).ready should end with }); not )}; See: jsfiddle.net/x3UyB/2 — mVChr
– mVChr, Commented Apr 27, 2011 at 20:21

mattsven · Accepted Answer · 2014-10-02 19:27:42Z

68

UPDATED ANSWER:

Old answer, correct method nowadays is to use jQuery's .prop(). IE, element.prop("selected", true)

OLD ANSWER:

Use this instead:

$("#routetype option[value='quietest']").attr("selected", "selected");

Fiddle'd: http://jsfiddle.net/x3UyB/4/

edited Oct 2, 2014 at 19:27

answered Apr 27, 2011 at 20:20

mattsven

23.5k11 gold badges73 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kevin Meredith Over a year ago

what if I want to use a variable instead of a hard-coded value (like "quietest"?

mattsven Over a year ago

@Kevin You can always do $("#routetype option").each() to compare dropdown values, or just $("#routetype option[value='"+option_value+"']");

kalbsschnitzel Over a year ago

@mattsven, I get selected='selected' on two options this way. just an FYI.

Tony Stark · Accepted Answer · 2012-12-27 13:52:30Z

32

You need to select jQuery in the dropdown on the left and you have a syntax error because the $(document).ready should end with }); not )}; Check this link.

edited Dec 27, 2012 at 13:52

Tony Stark

8,1008 gold badges47 silver badges63 bronze badges

answered Apr 27, 2011 at 21:01

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

1 Comment

simon Over a year ago

Thanks. Actually the issue was because I was working with jQuery Mobile and you need to call $("#routetype").selectmenu('refresh'); as well to update what is shown.

Taryn · Accepted Answer · 2015-02-11 15:06:52Z

You can select dropdown option value by name

jQuery("#option_id").find("option:contains('Monday')").each(function() { if( jQuery(this).text() == 'Monday' ) { jQuery(this).attr("selected","selected"); } });

Collectives™ on Stack Overflow

jQuery: set selected value of dropdown list?

3 Answers 3

3 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Linked

Related