javascript - 选项 :first-child isn't selecting the same in all cases

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/