I was expecting to be able to easily add functionality to be able to click on an optgroup
directly in a select
<select id="MySelect" name="MySelect">
<option value="">Select ...</option>
<optgroup label="Group1" data-id="Group1">
<option selected="selected" value="1">Value 1</option>
<option value="2">Value 2</option>
</optgroup>
<optgroup label="Group2" data-id="Group2">
<option value="3">Value 3</option>
<option value="4">Value 4</option>
</optgroup>
</select>
With the supporting jQuery
$("#MySelect").on('click', 'optgroup', function() {
alert($(this).data('id'));
});
And css:
#MySelect optgroup {
background-color: orange;
cursor: pointer;
}
However:
- Chrome 38 ignores the
cursor
css foroptgroup
, and ignores the event click entirely - Firefox 32 honours the
cursor
css, and ignores the click event directly on theoptgroup
. - IE 11 fires the click event when clicking on the
optgroup
, but thedata-id
reports theoptgroup
of the last selected 'option', which will be wrong unless the last child option is serendipitously beneath the parentoptgroup
.
In jQuery 2.1.0
, IE and FireFox will raise the click event if one of the child options below the optgroup
is clicked, but not Chrome.
The three browsers then also have differing opinions on whether background css colour applied to the optgroup
should be applied to the child selects
or not.
And not to mention the lack of support for nested optgroups
Which then leads to the practice of alternative hacks to optgroup
like
option
indents in selects with different css styles for group headers
, which loses the keyboard selection usability.
TL;DR
So my question is, optgroup
has been in html since at least 4.01 yet seems to have been stuck in the dunce corner (Exhibit A : The link to optgroup on the bottom of the W3C wiki gives a 404). Why is this?, so is there a solution (e.g. library - modernizr, jQuery-plugin) until optgroup
is standardized?
Edit
Here's a picture of the Fiddle of the CSS variances with the 4 browsers I've got on a Windows 8.1 PC - only FF shows the cursor; FF and IE apply the OptGroup's background-color
to the options as well.