176

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

1
  • 4
    do your options have a value?
    – Victor
    Feb 1, 2011 at 15:45

14 Answers 14

199

How about

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

Example:

$('select>option:eq(3)').attr('selected', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>


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

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

Example:

$('select>option:eq(3)').prop('selected', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

12
  • 4
    imo this shouldn't even work; the selected state of an option should be triggered by changing the state of the select itself instead :)
    – Ja͢ck
    Jan 17, 2013 at 14:28
  • 1
    selectElement.selectedIndex = index; is what Jack means.
    – rlemon
    Jan 31, 2013 at 18:11
  • @rlemon, i understand, but selectedIndex cannot be used for multiple selection when multiple attribute is used. And the normal (html) way to set selected elements is the selected attribute of the option elements. Jan 31, 2013 at 18:32
  • @GabyakaG.Petrioli The normal way is actually to set the selected property of each corresponding options element to true (and optionally the rest to false explicitly). Multiple selections are pretty nasty actually :)
    – Ja͢ck
    Jan 31, 2013 at 18:59
  • 6
    @sunnyiitkgp the onchange event is never triggered when the value is changed programmatically. You could add a .trigger('change') at the end to also fire the event (although it will fire regardless of the value having actually changed) Jun 14, 2016 at 18:43
163

The solution:

$("#element-id").val('the value of the option');
1
  • 3
    it doesn't set the selected option in the HTML. Aug 2, 2014 at 7:30
56

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;
4
  • 3
    The problem is that it doesn't fire an 'onchange' event. May 12, 2013 at 8:02
  • 3
    @GuyKorland This happens with none of the other answers either, demonstrated here; if you want an event to fire, you have to do it manually.
    – Ja͢ck
    May 12, 2013 at 13:17
  • 1
    @Jack Is there a short way? The only way I found: var fireEvent = function(selectElement){ if(selectElement){ if ("fireEvent" in selectElement){ selectElement.fireEvent("onchange"); } else { var evt = document.createEvent("HTMLEvents"); evt.initEvent("change", false, true); selectElement.dispatchEvent(evt); } } } May 12, 2013 at 20:48
  • 5
    @GuyKorland jQuery exposes .trigger() for that, but since you're already doing this with code it would be easy to also call the change handlers yourself.
    – Ja͢ck
    May 13, 2013 at 2:11
40

I would do it this way

 $("#idElement").val('optionValue').trigger('change');
2
  • 4
    $("#idElement").val('optionValue').change() could also work
    – Ullullu
    May 11, 2017 at 14:53
  • 1
    finally an answer that also considers the event! @Ullullu indeed, your version works just as well.
    – xeruf
    Apr 9, 2022 at 9:26
26

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

1
  • Also worked $('#SelectCtrlId').val('ValueToSelect');
    – Sai
    Oct 13, 2015 at 21:07
24

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.

0
11

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

$('select>option[value="' + value + '"]').prop('selected', true);
2
  • $('select').val(value); Why so serious? ;)
    – Zeeshan
    Dec 17, 2015 at 12:06
  • 1
    @Zee The answered code allow multiple selections too.
    – Azghanvi
    Jul 7, 2017 at 6:21
6
 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);
0
3

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);
1
  • The "1-based index" is better when manipulating things with dates. Saves me from a lot of troubles. thanks.
    – TCB13
    Feb 1, 2012 at 22:24
3
 $('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

3

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

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

Try this:

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

Regards!

2

answer with id:

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

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 the 2nd lies outside scope of your questions, it serves to illustrate how 1st could be applied / amended as req.

1
  • (note - $0 serves to represent $, but I'm relatively new to Python so still familarising myself with differences in relation to some of this syntax - but selectedindex still avail. in jquery world - hope this helps.
    – JB-007
    Oct 3, 2020 at 22:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.