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

do your options have a value? – Victor Feb 01 '11 at 15:45 — Victor, Feb 01 '11 at 15:45

score 199 · Accepted Answer · edited May 05 '21 at 03:57

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>

edited May 05 '21 at 03:57

Erfan Bahramali

392
3
13

answered Feb 01 '11 at 15:45

Gabriele Petrioli

191,379
34
261
317

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 '13 at 14:28
1

`selectElement.selectedIndex = index;` is what Jack means. – rlemon Jan 31 '13 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. – Gabriele Petrioli Jan 31 '13 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 '13 at 18:59
(*i think that is what i said, too*) – Gabriele Petrioli Jan 31 '13 at 19:38
There's a subtle difference, though that said, your current answer doesn't deal with multiple either. – Ja͢ck Jan 31 '13 at 23:37
@jack, it does not as the OP does not need it. I was responding to your comment that "*imo this shouldn't even work; the selected state of an option should be triggered by changing the state of the select itself instead*" and i am saying that this concept could not deal with all valid usages of a select element. (*if you are arguing on the W3C specs, then that is another issue, and glad to discuss it on the W3C mailing lists*) – Gabriele Petrioli Feb 01 '13 at 00:55
Sorry for that, I should remind myself not to write foot-in-mouth comments when I'm still sleeping :( I didn't realize that `new Option() instanceof Node`, so assuming `.attr('selected')` maps to the property, it be kosher; of course, the argument for using `.selectedIndex` still holds for regular dropdowns :) – Ja͢ck Feb 01 '13 at 02:25
The problem is that it doesn't fire an 'onchange' event. – Guy Korland May 12 '13 at 08:12
It is not triggering 'onchange' event. Any hacks for that too?? – sundeepg Jun 14 '16 at 08:15
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*) – Gabriele Petrioli Jun 14 '16 at 18:43
I ran into an issue where the dropdown value wouldn't "visually" change until I performed a .change() on the target. However, since I had an event tied to the dropdown, it would cause the event to also trigger. Using .prop('selected', true) solved the issue! – Jarrett Barnett Apr 16 '17 at 05:21

score 163 · Answer 2 · edited Mar 30 '18 at 21:39

163

The solution:

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

edited Mar 30 '18 at 21:39

Charlie

8,530
2
55
53

answered Feb 01 '11 at 15:46

Harold Sota

7,490
12
58
84

3

it doesn't set the `selected` option in the HTML. – Ahmad hamza Aug 02 '14 at 07:30

Ja͢ck · Answer 3 · 2013-02-28T00:43:05.207

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;

edited Feb 28 '13 at 00:43

answered Jan 17 '13 at 14:25

Ja͢ck

170,779
38
263
309

3

The problem is that it doesn't fire an 'onchange' event. – Guy Korland May 12 '13 at 08:02
3

@GuyKorland This happens with none of the other answers either, demonstrated [here](http://jsbin.com/ehahug/1/); if you want an event to fire, you have to do it manually. – Ja͢ck May 12 '13 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); } } } – Guy Korland May 12 '13 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 '13 at 02:11

score 40 · Answer 4 · answered Nov 05 '15 at 10:21

40

I would do it this way

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

answered Nov 05 '15 at 10:21

Francesco Gasparetto

1,819
16
20

4

$("#idElement").val('optionValue').change() could also work – Ullullu May 11 '17 at 14:53
1

finally an answer that also considers the event! @Ullullu indeed, your version works just as well. – xeruf Apr 09 '22 at 09:26

Ionică Bizău · Answer 5 · 2015-10-14T05:12:21.733

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

edited Oct 14 '15 at 05:12

answered Jun 17 '13 at 14:06

Ionică Bizău

109,027
88
289
474

Also worked $('#SelectCtrlId').val('ValueToSelect'); – Sai Oct 13 '15 at 21:07

score 25 · Answer 6 · answered Feb 01 '11 at 15:47

25

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.

answered Feb 01 '11 at 15:47

Victor

4,721
1
26
31

score 11 · Answer 7 · answered Jan 21 '14 at 14:46

11

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

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

answered Jan 21 '14 at 14:46

nlareu

125
1
10

$('select').val(value); Why so serious? ;) – Zeeshan Dec 17 '15 at 12:06
1

@Zee The answered code allow multiple selections too. – Azghanvi Jul 07 '17 at 06:21

score 6 · Answer 8 · answered Aug 03 '17 at 10:12

 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);

score 3 · Answer 9 · answered May 27 '13 at 17:56

 $('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

score 3 · Answer 10 · answered Nov 21 '13 at 10:59

3

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

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

answered Nov 21 '13 at 10:59

Savaratkar

1,974
1
24
44

score 3 · Answer 11 · answered Dec 02 '13 at 14:20

3

Try this:

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

Regards!

answered Dec 02 '13 at 14:20

Nicolas Finelli

2,170
1
14
9

score 3 · Answer 12 · answered Feb 01 '11 at 15:50

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);

answered Feb 01 '11 at 15:50

Lee D

12,551
8
32
34

The "1-based index" is better when manipulating things with dates. Saves me from a lot of troubles. thanks. – TCB13 Feb 01 '12 at 22:24

score 2 · Answer 13 · answered Dec 22 '12 at 11:51

2

answer with id:

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

answered Dec 22 '12 at 11:51

Javad Masoumi

347
2
5

JB-007 · Answer 14 · 2021-06-04T19:04:04.610

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.

edited Jun 04 '21 at 19:04

answered Oct 03 '20 at 22:51

JB-007

2,156
1
6
22

(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 03 '20 at 22:53

How to use jQuery to select a dropdown option?

14 Answers14

Linked

Related