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>
Asked
Active
Viewed 9.8k times
72
Penny Liu
- 15,447
- 5
- 79
- 98
marcin_koss
- 5,763
- 10
- 46
- 65
7 Answers
67
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.
-
Sorry forgot option styling is a mess accross web browsers – grifos Mar 27 '12 at 15:59
-
9At least you can create indentation with adding – grifos Mar 27 '12 at 16:02
-
Note in 2023. For some reason `padding-left` only works when `multiple="multiple"` is set. Removing this parameter, renders padding-left like normal padding. – Sha Jan 10 '23 at 15:48
11
This is not possible with plain html. A few browsers (mozilla) would allow you to achieve something similar using css, but at the time of this writing the majority of browsers (webkit, et.al) do not support styling of html select elements.
However there are a number of javascript libraries designed to enhance html-select widgets and provide missing features such as the one you've requested. To name a few:
Coleman
- 631
- 5
- 13
9
Until this is supported in an html standard, any and all answers given have been problematic, including:
- Class attributes are allowed on the children of a select, but if/how the style is applied to the element varies enormously between browsers and browser versions.
- Prefixing with will have the consequence that if the select element is narrower than the selected option, the visual effect will not be pleasing, with readable text hidden off to the right (see example below).
- Any style you apply will not necessarily fit with the styling the user of the browser has become accustomed to. bold and italic is Firefox, but not necessarily every browser. Many browsers apply a style including gray color in order to help indicate the optgroup is NOT selectable
- The concept of a select optgroup label will not necessarily be expected by the user.
This has lead me to conclude the best way to work around the problem is either to use a library like UI-Selectable for all selects throughout your site (for consistency), OR use the first option in the optgroup to represent selecting all the children, with a clear description (such as 'ALL Swedish cars'):
<select multiple="multiple">
<optgroup label="Parent">
<option value="0" class="optionChild">ALL Children</option>
<option value="1" class="optionChild">Child Tag 1</option>
<option value="2" class="optionChild">Child Tag 2</option>
</optgroup>
</select>
.my-select {
width: 60px;
}<select class="my-select">
<option>Parent</option>
<option selected="selected"> Child</option>
</select>
Brent
- 4,611
- 4
- 38
- 55
-
Unless you wanna go down the library route this is by far my favourite solution. Thanks! – perry Feb 20 '20 at 05:22
-
Great info, but the conclusion as to which is the best route strongly depends on what the developer is after: which browsers they're targeting, whether they're trying to recreate `optgroup` or simply tab items out, and various other aspects of the use case. – Andrew Feb 21 '21 at 00:12
4
a little different solution..
.optionGroup {
font-weight: bold;
}<select>
<option value="0" class="optionGroup">Parent Tag</option>
<option value="1"> Child Tag1</option>
<option value="2"> Child Tag2</option>
</select>
Yura Gymenetskiy
- 41
- 1
-
Not the prettiest implementation but it produces the desired result. :-) – jeffdill2 Sep 11 '19 at 19:33
1
@grifos's answer is not supported in WebKit Browsers and did not work when Tested in IE 11.
One suggestion might be to use an Unordered/Ordered list and to style it with CSS, then add the functionality with JavaScript/jQuery.
I have seen a nice implementation of this in the past, it can look really slick!
mgilberties
- 434
- 4
- 13
0
This will give the bare feel of a dropdown list with selectable optgroups. Left it very plain but you can style to your hearts content.
.hide {
display:none;
}
.show {
display:block;
}
.selected.button {
display:block;
font-weight: bold;
}
button {
text-align: left;
min-width: 200px;
margin-left: 10px;
border: 0px;
background: #eee;
display: block;
}
#value_display {
width: 210px;
border: 1px solid #ddd;
border-radius: 4px;
padding-left: 8px;
}
</style>
<html>
<body>
<!-- Div is a display and also trigger for displaying dropdown -->
<div id="value_display" onclick="showOptions(this.value)">
opt 0
</div>
<!-- setting height and doing overflow-y allows dropdown list with scrollbox -->
<div id="select_div" class="hide" style="height: 80px; overflow-y: scroll;">
<button class="selected button" onclick="select(this.id)" id="opt 0">opt 0</button>
<button onclick="select(this.id)" id="opt 0-1" style="padding-left: 15px">opt 0-1</button>
<button onclick="select(this.id)" id="opt 0-2" style="padding-left: 15px">opt 0-2</button>
<button onclick="select(this.id)" id="opt 0-3" style="padding-left: 15px">opt 0-3</button>
<button onclick="select(this.id)" id="opt 0-4" style="padding-left: 15px">opt 0-4</button>
<button class="" onclick="select(this.id)" id="opt 1">opt 1</button>
<button onclick="select(this.id)" id="opt 1-1" style="padding-left: 15px">opt 1-1</button>
<button onclick="select(this.id)" id="opt 1-2" style="padding-left: 15px">opt 1-2</button>
<button onclick="select(this.id)" id="opt 1-3" style="padding-left: 15px">opt 1-3</button>
<button onclick="select(this.id)" id="opt 1-4" style="padding-left: 15px">opt 1-4</button>
<script>
var showingOptions = false;
var showingID = document.getElementById('value_display').innerHTML;
function showOptions() {
if(showingOptions) {
document.getElementById('select_div').className = "hide";
showingOptions = false;
}
else {
document.getElementById('select_div').className = "show";
showingOptions = true;
}
}
function select(id){
document.getElementById(id).className = 'selected button';
document.getElementById(showingID).className = 'show';
showingID = id;
document.getElementById('value_display').innerHTML = id;
document.getElementById('select_div').className = 'hide';
}
</script>
Steven Kaspar
- 1,147
- 10
- 14
-6
The question is not very clear but is this what you are looking for:
<select multiple="multiple">
<optgroup label="Parent Tag">
<option value="1">Child Tag</option>
<option value="2">Child Tag</option>
</optgroup>
</select>
nathanjosiah
- 4,441
- 4
- 35
- 47
-
2Sorry for not being clear enough. I want the optgroup to be selectable the same way you select option – marcin_koss Mar 27 '12 at 15:56