如何使用 Javascript 到 select 下拉列表中的第 n 个选项

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>

默认情况下，它在框中显示橙色，但我想要在框中显示葡萄。 请帮助谢谢

Answer 1

对于您的 HTML 下拉菜单

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

使用 JS 您可以使用以下代码来获得所需的结果

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

只需将索引 0,1.. 分配给下拉列表的长度即可获得选定的值

Answer 2

如果你想使用jQuery，那么就这样做

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

Javascript

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

Answer 3

1. 您可以使用选择器:nth-child()索引从 1 开始
2. 您可以使用方法.eq()索引从 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>

Answer 4

HTML代码：

<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)，您可以通过索引默认选择您要选择的选项。 它从 0 开始到 n-1。

Answer 5

您可以使用 selectedIndex 属性：

$('#selectID').prop('selectedIndex',  0)

上面的代码将选择第一个选项，因为索引从 0 开始。

试试这个JSFiddle 。

Answer 6

在 2023 年，没有 jQuery，正确的片段是这样的：

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