Search code examples
jqueryjquery-selectorshtml-select

Set select option 'selected', by value

I have a select field with some options in it. Now I need to select one of those options with jQuery. But how can I do that when I only know the value of the option that must be selected?

I have the following HTML:

<div class="id_100">
  <select>
    <option value="val1">Val 1</option>
    <option value="val2">Val 2</option>
    <option value="val3">Val 3</option>
  </select>
</div>

I need to select the option with value val2. How can this be done?

Here's a demo page: http://jsfiddle.net/9Stxb/

Solution

  • There's an easier way that doesn't require you to go into the options tag:

    $("div.id_100 select").val("val2");

    Check out this jQuery method.

    Note: The above code does not trigger the change event. You need to call it like this for full compatibility:

    $("div.id_100 select").val("val2").change();