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

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和奥迪 TT）它选择了所有三个，最终选择了奥迪TT

我尝试对每个做一些事情并只选择第二个，但后来我意识到下拉菜单是动态的，我不想选择默认的（即--select one--），但第一组的第一个元素

我试图模拟一个jsfiddle，但它是搞砸了并且无法工作，不知道为什么:-/
你可以在这里看到

Answer 1

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

$("#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 中选择而不是选择：

$('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

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

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