Search code examples
htmlselectoptgroup

Is there a way to select the label of the optgroup in a select tag?

Let's say we have this select tag. Is it possible for me to select 'Swedish Cars' option that shows up in the dropdown?

<select>
    <optgroup label="Swedish Cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </optgroup>
</select>

If not, what would be a good suggestion in making something similar and so that 'Swedish Cars' is selectable?

Solution

  • A Javascript select might help.

    First, show only Swedish Cars, German Cars etc., in one "Parent" dropdown. When a parent is selected, their children show up in a new dropdown.

    Don't force the user to select a child.

    This is better illustrated in this page: http://wimleers.com/demo/hierarchical-select/taxonomy - look at the very first Dropdown system...