Question

我的下拉列表非常相似：

<select id='someSelect'>
    <option value="0">---select one---</option>
    <optgroup label="Bikes">
        <option value="B-4">Hayabusa</option>
        <option value="B-2">GSXR</option>
        <option value="B-3">Ninja</option>
        <option value="B-6">Enticer</option>
    </optgroup>
    <optgroup label="Cars"> 
        <option value="C-4">Audi TT</option>
        <option value="C-2">Awesome Car</option>
        <option value="C-23">Japanese car</option>
        <option value="C-9">German car</option>
    </optgroup>
</select>

我只想选择第一组的第一个元素（这里是自行车）。我如何在jQuery中使用它？

目前，我试过这个：

$('#someSelect option:nth-child(1)').attr("selected", "selected");

但是，问题是，因为有三个第一个元素（--select--，Hayabusa和Audi TT），它会选择所有三个元素，最终选择{ {1}}

我尝试用Audi TT做一些事情然后只选择第二个，但后来我意识到下拉列表是动态的，我不想选择默认值（each ）但第一组的第一个元素

我试图嘲笑一个jsfiddle，但它已经搞砸了，不能正常工作，不知道为什么： - /
you can see it here

Answer 1

Here是一个示例，这是我使用的选择器：

$("#someSelect optgroup option:first").attr("selected", "selected");

如您所见，我通过查看optgroup元素来使用第一个选项。

Answer 2

这很有效：

http://jsfiddle.net/nYd67/1/

$(function(){
    $('#someSelect optgroup:eq(0) option:eq(0)').attr("selected", "selected");
});

Answer 3

从optgroup中选择而不是select：

$('optgroup[label=Bikes] option:first')

或者，如果您不想指定标签，只需在optgroup上进行过滤：

$('optgroup:first option:first')

Answer 4

只需在选择器中加入optgroup：

$('#someSelect optgroup:nth-child(2) option:nth-child(1)')

请记住，:nth-child()选择器是基于1的，而不是基于0的。此外，在这种情况下，您甚至不需要使用标记名称限定选择器，因此它也可以只是：

$('#someSelect :nth-child(2) :nth-child(1)')

Answer 5

我总觉得.eq()更容易使用。这似乎在你的jsfiddle中正常工作。

$('#someSelect option').eq(1).attr("selected", "selected");

Answer 6

$('#someSelect optgroup:first option:first').attr('selected', true);

这是有效的，我已经测试了你的HTML

Answer 7

option元素的第一个optgroup中第一个select的选择器，ID为“someSelect”：

"select#someSelect > optgroup:nth-child(1) > option:nth-child(1)"

使用jquery在多组下拉列表中选择第一个选项

7 个答案: