Selectable <optgroup> in HTML <select> tag

html html-select optgroup
marcin_koss picture marcin_koss · Mar 27, 2012 · Viewed 83.7k times · Source

Is there any way to make the option group selectable?

Answer

grifos picture grifos · Mar 27, 2012

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.

Related questions

How to hide optgroup label?

I need to get rid of labels in optgroups. From this: http://i.stack.imgur.com/Gn5e5.png Into this: http://i.stack.imgur.com/ZvRM7.png But I need to do this with opgroups. I don`t want …

Read More
Set a select by option value with optgroups

We do business in the US and Canada, so on a registration form I have a select that has optgroups to separate the US states from the Canadian provinces. I use the two character codes and store them in the …

Read More
How can I set the default value for an HTML <select> element?

I thought that adding a "value" attribute set on the <select> element below would cause the <option> containing my provided "value" to be selected by default: However, this did not work as I had expected. How …

Read More