[javascript] How to use jQuery to select a dropdown option?

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

The easiest way is val(value) function:

$('select').val(2);

And to get the selected value you give no arguments:

$('select').val();

Also, you if you have <option value="valueToSelect">...</option>, you can do:

$('select').val("valueToSelect");

DEMO

The solution:

$("#element-id").val('the value of the option');

I prefer nth-child() to eq() as it uses 1-based indexing rather than 0-based, which is slightly easier on my brain.

//selects the 2nd option
$('select>option:nth-child(2)').attr('selected', true);

This works for me:

$selectedindex=4

If you want to randomise options, you could always do something like this:

$0selectedindex=Math.floor((Math.random()*($0.length-1)+1)

Whilst 2nd bullet lies outside scope of your questions, it serves to illustrate how 1st bullet could be applied / amended as req.

answer with id:

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

Try this:

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

Regards!

With '' element usually we use 'value' attribute. It will make it easier to set then:

$('select').val('option-value');

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

One caveat here is if you have javascript watching for select/option's change event you need to add .trigger('change') so the code become.

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

because only calling .attr('selected', 'selected') does not trigger the event

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;

 Try with the below codes. All should work. 
    $('select').val(2);
    $('select').prop('selectedIndex', 1);
    $('select>option[value="5"]').prop('selected', true);
    $('select>option:eq(3)').attr('selected', 'selected');
    $("select option:contains(COMMERCIAL)").attr('selected', true);

if your options have a value, you can do this:

$('select').val("the-value-of-the-option-you-want-to-select");

'select' would be the id of your select or a class selector. or if there is just one select, you can use the tag as it is in the example.

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

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

I would do it this way

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