Set select option 'selected', by value
Set select option 'selected', by value
Question
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/
Accepted Answer
There's an easier way that doesn't require you to go into the options tag:
$("div.id_100 select").val("val2");
Check out the this jQuery method.
Read more... Read less...
To select an option with value 'val2':
$('.id_100 option[value=val2]').attr('selected','selected');
Use the change() event after selecting the value. From the docs:
If the field loses focus without the contents having changed, the event is not triggered. To trigger the event manually, apply
.change()without arguments:
$("#select_id").val("val2").change();
More information is at .change().
Deselect all first and filter the selectable options:
$('.id_100 option')
.removeAttr('selected')
.filter('[value=val1]')
.attr('selected', true)
<select name="contribution_status_id" id="contribution_status_id" class="form-select">
<option value="1">Completed</option>
<option value="2">Pending</option>
<option value="3">Cancelled</option>
<option value="4">Failed</option>
<option value="5">In Progress</option>
<option value="6">Overdue</option>
<option value="7">Refunded</option>
Setting to Pending Status by value
$('#contribution_status_id').val("2");