如何使用 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