How do you select a particular option in a SELECT element in jQuery?
A selector to get the middle option-element by value is
$('.selDiv option[value="SEL1"]')
For an index:
$('.selDiv option:eq(1)')
For a known text:
$('.selDiv option:contains("Selection 1")')
EDIT: As commented above the OP might have been after changing the selected item of the dropdown. In version 1.6 and higher the prop() method is recommended:
$('.selDiv option:eq(1)').prop('selected', true)
In older versions:
$('.selDiv option:eq(1)').attr('selected', 'selected')
EDIT2: after Ryan's comment. A match on "Selection 10" might be unwanted. I found no selector to match the full text, but a filter works:
$('.selDiv option')
.filter(function(i, e) { return $(e).text() == "Selection 1"})
EDIT3: Use caution with $(e).text()
as it can contain a newline making the comparison fail. This happens when the options are implicitly closed (no </option>
tag):
<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
:
</select>
If you simply use e.text
any extra whitespace like the trailing newline will be removed, making the comparison more robust.
You can just use val()
method:
$('select').val('the_value');
None of the methods above provided the solution I needed so I figured I would provide what worked for me.
$('#element option[value="no"]').attr("selected", "selected");
By value, what worked for me with jQuery 1.7 was the below code, try this:
$('#id option[value=theOptionValue]').prop('selected', 'selected').change();