如何使用Javascript在下拉列表中选择第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>

它默认情况下在框中显示橙色，但我想要一个框中的Grapes。请帮忙 感谢

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。