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
cursorcss foroptgroup, and ignores the event click entirely - Firefox 32 honours the
cursorcss, and ignores the click event directly on theoptgroup. - IE 11 fires the click event when clicking on the
optgroup, but thedata-idreports theoptgroupof 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.
