How to use jQuery to select a dropdown option?

Question

I was wondering if it’s possible to get jQuery to select an <option>, say the 4th item, in a dropdown box?

<select>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>

I want the user to click a link, then have the <select> box change its value, as if the user has selected it by clicking on the <option>.

Answer 1

Try this:

$('#mySelectElement option')[0].selected = true;

Regards!

Answer 2

answer with id:

$('#selectBoxId').find('option:eq(0)').attr('selected', true);

Answer 3

I would do it this way

 $("#idElement").val('optionValue').trigger('change');

Answer 4

How about

$('select>option:eq(3)').attr('selected', true);

example at http://www.jsfiddle.net/gaby/CWvwn/

---

for modern versions of jquery you should use the .prop() instead of .attr()

$('select>option:eq(3)').prop('selected', true);

example at http://jsfiddle.net/gaby/CWvwn/1763/

Answer 5

HTML select elements have a selectedIndex property that can be written to in order to select a particular option:

$('select').prop('selectedIndex', 3); // select 4th option

Using plain JavaScript this can be achieved by:

// use first select element
var el = document.getElementsByTagName('select')[0]; 
// assuming el is not null, select 4th option
el.selectedIndex = 3;

Answer 6

Use the following code if you want to select an option with a specific value:

$('select>option[value="' + value + '"]').prop('selected', true);