[javascript] jQuery: set selected value of dropdown list?

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

This question is related to javascript jquery

The answer is


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

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/