Search code examples
jquerydrop-down-menuoptgroup

select 1st option in a multi group dropdown with jquery

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

Solution

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