Question

Why doesn’t this work when a select has optgroups in it?

doesn’t work

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

works

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

When I do $("select:eq(1) option:first-child").val() it appears to be getting the right option, but when I call attr() it isn’t picking the right one.

Example: http://jsfiddle.net/7J2Yb/

Answer 1

If you check the value of $("option:first-child").length you will notice that it is 5. :first-child is selecting options that are the first child of their parent, which are:

<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>

Furthermore $("select:eq(1) option:first-child").length is equal to 4 for the same reason above. Calling .val() on the array outputs the first elements value, but the selector is selecting all 4 of them.

---

If you want to select the first element in each select write:

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

working example: http://jsfiddle.net/hunter/7J2Yb/2/