选项：第一个孩子在所有情况下都没有选择相同

Question

为什么select中有optgroups时不工作？

不起作用

$("option:first-child").attr("selected", "selected"); 

工作

$("select>option:first-child").attr("selected", "selected"); 

当我做$("select:eq(1) option:first-child").val()这似乎是获得正确的option，但是当我打电话attr()它没有选择正确的一个。

例子：http://jsfiddle.net/7J2Yb/

Answer 1

如果检查$("option:first-child").length的价值，你会发现，它是5。 :first-child是选择是它们的父的第一个子选项，它们是：

<SELECT id='a'> 
    <OPTION selected value=0>(all)</OPTION><!-- THIS ONE --> 
    <OPTION value=1>A</OPTION> 
    <OPTION value=2>B</OPTION> 
    <OPTION value=3>C</OPTION> 
</SELECT> 

<SELECT id='b'>  
    <OPTION selected value=0>(all)</OPTION><!-- THIS ONE --> 
    <optgroup label="A"> 
     <OPTION value=1>A</OPTION><!-- THIS ONE --> 
    </optgroup> 
    <optgroup label="B"> 
     <OPTION value=2>B</OPTION><!-- THIS ONE --> 
    </optgroup> 
    <optgroup label="C"> 
     <OPTION value=3>C</OPTION><!-- THIS ONE --> 
    </optgroup> 
</SELECT> 

此外$("select:eq(1) option:first-child").length等于4用于上述相同的理由。在数组上调用.val()会输出第一个元素值，但是选择器正在选择它们的全部4个。

---

如果你想在每select写入选择的第一要素：

$("select").find("option:first").attr("selected", true); 

工作示例：http://jsfiddle.net/hunter/7J2Yb/2/