select 1st option in a multi group dropdown with jquery

Question

I have dropdown very similar to this:

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

I just want to select the 1st element of 1st group (bikes here). How do I go about it in jQuery please?

Currently, I tried this:

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

BUT, the trouble is, since there are three 1st elements ( --select--, Hayabusa and Audi TT) it selects all three, which finaly selects Audi TT

I tried to do some stuff with each and select just the second one, but then I realized that the dropdown is dynamic, I don't want to select the default one (which is --select one--) but the first element of first group

I tried to mock up a jsfiddle, but it's mucked up and not working, not sure why :-/
you can see it here

Nork

Please avoid profanity, it sets off net nannies that block people from using SO at work, and tends to offend people. – Rentier

Answer 1

Here is an example and here is the selector I used:

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

As you can see, I used the first option by looking inside the optgroup element.

Dianetics

aa this looks obvious.. sometimes my dropdown doesn't have any optgroup at all and it works great on that! though I do not understand how.. Thanks for the answer! – Nork

Answer 2

Well this works:

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

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

Bobbiebobbin

Answer 3

select from the optgroup instead of the select:

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

Or, if you don't want to specify the label, just filter on the optgroup as well:

$('optgroup:first option:first')

Spermatozoid

Answer 4

Just include the optgroup in your selector:

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

Just remember that the :nth-child() selector is 1-based, not 0-based. Also, in this case, you don't even need to qualify the selector with a tag name, so it could also be just:

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

Prognosticate

Answer 5

I always find that .eq() is a lot easier to use. This seems to work correctly in your jsfiddle.

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

Plotkin

Answer 6

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

this works, I have tested on your html

Disassemble

Answer 7

The selector for the first option in the first optgroup of the select element with an id of "someSelect":

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

Siriasis

yes, this made me understand the theory behind it, thank you so much! – Nork