marcin_koss marcin_koss - 4 months ago 45
HTML Question

Selectable <optgroup> in HTML <select> tag

Is there any way to make the option group selectable?

<select>
<optgroup value="0" label="Parent Tag">
<option value="1">Child Tag</option>
<option value="2">Child Tag</option>
</optgroup>
</select>

Answer

I don't think you can but you can easily reproduce the visual style with css and thus only have options in your select, so everything is selectable.

.optionGroup {
    font-weight: bold;
    font-style: italic;
}
    
.optionChild {
    padding-left: 15px;
}
<select multiple="multiple">
    <option value="0" class="optionGroup">Parent Tag</option>
    <option value="1" class="optionChild">Child Tag</option>
    <option value="2" class="optionChild">Child Tag</option>
</select>

The multiple attribute allow you to select more than one row (with ctrl click). You can remove it if it is not what you want. It was to show you that everything became selectable and that is looking the same as with optiongroup element.