How to use Javascript to select the nth option in dropdown

Question

<select class=fruits">
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Grapes">Grapes</option>
<option value="Kiwi">Kiwi</option>
</select>

it by default shows orange in the box but I want Grapes in a box. Please help Thanks

try this link: https://stackoverflow.com/questions/4222950/how-to-use-jquery-to-select-the-nth-option — Kannan K, Jan 24 '18 at 06:49
in html: `selected="selected"` on the option of your choice! — Allan, Jan 24 '18 at 06:50
https://stackoverflow.com/questions/10911526/how-do-i-change-an-html-selected-option-using-javascript — rrk, Jan 24 '18 at 06:50
Possible duplicate of [How do I change an HTML selected option using JavaScript?](https://stackoverflow.com/questions/10911526/how-do-i-change-an-html-selected-option-using-javascript) — Cris Luengo, Jan 24 '18 at 07:00

score 4 · Answer 1 · edited Jan 24 '18 at 12:05

For your HTML Dropdown

<select class=fruits">
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Grapes">Grapes</option>
<option value="Kiwi">Kiwi</option>
</select>

Using JS You can use below code to get desired result

document.getElementsByClassName("fruits")[0].selectedIndex = 2 // will select Grapes

Just assign index 0,1..to length of dropdown to get selected value

score 3 · Accepted Answer · edited Jan 24 '18 at 19:00

3

If you want to use jQuery, then do it like this

$("select.fruits").val("Grapes");

Javascript

var element = document.getElementsByClassName('fruits')[0];
element.value = valueToSelect;

edited Jan 24 '18 at 19:00

marc_s

732,580
175
1,330
1,459

answered Jan 24 '18 at 06:48

Pranay Rana

175,020
35
237
263

@tidehunter please do accept answer if it works foryou – Pranay Rana Jan 24 '18 at 07:14
There are two pages from the first page if I redirect here it should select grapes automatically. I didn't have the access to the Html page of above code. Please help thank you – tidehunter Jan 24 '18 at 07:42

Babulal N Choudhary · Answer 3 · 2018-01-24T08:05:11.407

2

HTML Code:

<select class=fruits">
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Grapes">admin</option>
<option value="Kiwi">Kiwi</option>
</select>

javascript:

$('.fruits option:eq(2)').attr('selected', 'selected');

eq(nth), you can pass index which option you want to select by default. it's start from 0 to n-1.

edited Jan 24 '18 at 08:05

answered Jan 24 '18 at 07:19

Babulal N Choudhary

76
1
3

didn't have name content in select option only class is there – tidehunter Jan 24 '18 at 07:48
you can try this now $('.fruits option:eq(2)').attr('selected', 'selected'); – Babulal N Choudhary Jan 24 '18 at 08:05

score 1 · Answer 4 · answered Jan 24 '18 at 06:52

You can use the selector :nth-child() index starts at 1
You can use method .eq() index starts at 0

$(".fruits").find('option').eq(0).css('color', 'blue')//index starts at 0 so first option will be blue
$(".fruits").find('option:nth-child(2)').css('color', 'red');//index starts at 1 so second option will be red

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="fruits">
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Grapes">admin</option>
<option value="Kiwi">Kiwi</option>
</select>

NcXNaV · Answer 5 · 2021-09-09T05:17:37.940

You can use the selectedIndex property:

$('select.fruits').prop('selectedIndex',  2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="fruits">
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Grapes">Grapes</option>
<option value="Kiwi">Kiwi</option>
</select>

The code above will select the third option, since the index starts from 0.

score 0 · Answer 6 · answered Jan 16 '23 at 15:45

0

In 2023, without jQuery, the correct snippet is this:

document.getElementsByClassName("fruits").selectedIndex = 2

answered Jan 16 '23 at 15:45

Omiod

11,285
11
53
59

How to use Javascript to select the nth option in dropdown

6 Answers6