4

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;
}

Jsfiddle here

However:

  • Chrome 38 ignores the cursor css for optgroup, and ignores the event click entirely
  • Firefox 32 honours the cursor css, and ignores the click event directly on the optgroup.
  • IE 11 fires the click event when clicking on the optgroup, but the data-id reports the optgroup of the last selected 'option', which will be wrong unless the last child option is serendipitously beneath the parent optgroup.

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 &nbsp; 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.

CSS differences for Opgroup

StuartLC
  • 104,537
  • 17
  • 209
  • 285
  • just becuase. but really who cares why and that is probably unanswerable. At the end of the day what one probably _really_ needs to know is how to write code that allows for these differences. "Why browsers implement things differently" could take several books to answer. Note that it's not the HTML that is really the issue, it's how browser manufacturers implement things in their browsers. – Michael Durrant Nov 01 '14 at 11:44
  • I would also consider posting the original question on programmers or superuser if you are looking for a more abstract analysis of why it's different. SO is more suited to specific concise answers imho – Michael Durrant Nov 01 '14 at 11:46
  • I changed the q here from "why" to "how to deal" because there is no single answer when we are talking about multiple makers all implementing things differently. browsers implement things differently. see netscape/ie and all that has followed. – Michael Durrant Nov 01 '14 at 11:48
  • Also see http://stackoverflow.com/a/3414427/631619 "The HTML spec here is really broken..." – Michael Durrant Nov 01 '14 at 11:51
  • 1
    http://stackoverflow.com/a/11579998/1981678 – BReal14 Dec 23 '14 at 15:27
  • 2
    nesting is disallowed by the spec (*last paragraph in http://www.w3.org/TR/html401/interact/forms.html#h-17.6 and **content model** in http://www.w3.org/TR/html5/forms.html#the-optgroup-element*) – Gabriele Petrioli Dec 23 '14 at 15:27
  • can you give a reason why you need the parent of the options to matter. What type of functionality are you shooting for? – Cayce K Dec 23 '14 at 16:04
  • 2
    building custom select box with group options will be a better idea – Naveen Setty Dec 28 '14 at 12:07
  • `select` with attribute `multiple` has `optgroup` clickable – Bogdan Kuštan Dec 30 '14 at 15:41

1 Answers1

5

I'm going to place an answer here and try to give a little perspective. The optgroup tag in HTML is not designed to be clicked, chosen, or used. It is meant to be a guide tool for the user to understand that a specific set of options are not the same as the previous set of options. As you are most likely aware of this, I am providing this information for purposes of guiding you into what I am offering.

(function($){
    $(document).on('change','#MySelect',function(){
        var test = $(this).find(':selected').parent().data('id');
        console.log(test);
    });
}(jQuery));

This code will register the id value from data of the optgroup when the user selects an option. This is more likely to occur than someone clicking on an optgroup. Think on how a user will see your data. They will look at the select and see the separated data. They may use the optgroup as a guide to the correct option they want, but they are less likely to try and click on it.

I imagine you want to provide some sort of informational event with these optgroups and sadly I don't know how to provide that. Listening to the change event is probably your best chance to provide information about it and provide your popups, informational text, or what ever you can think of to get a strong point across.

Please provide any more information in the comments to help me help you. I don't understand your goal or why you want this functionality, but I want to try and help guide you in the right direction..

CSS EDIT

So you brought up a point about the CSS and I think I have an answer. Imagine the optgroup as a div element and the options as the inner items. Now in reality they are laid out that way any way so it shouldn't be hard to imagine this.

Now... When you give the css of optgroup say :background: red: the optgroup alone by itself should be converted, but in reality the optgroup is taking the height of its content the options inside. Or the inner elements. In most browsers I would assume (since optgroup is rarely used) the option tag has a default background color of transparent which allows the select to have the background color of white or #ffffff. In this case the options would appear to take the color of the optgroup, but in reality they have no base. By changing the css to have a default for the options we fix this.

option{
    background: #fff;
}

In all versions of IE, Firefox and Chrome this removes the red color you see from the optgroup.

Cayce K
  • 2,288
  • 1
  • 22
  • 35
  • I'm not seeing a problem with the CSS in any browser I have tested (except IE and I don't really support IE a whole lot...). So not sure what to say about CSS aspect of your question. – Cayce K Dec 23 '14 at 16:33
  • Thanks for the answer! I've added an image showing the CSS differences on the fiddle provided. Which browser(s) did you demo? – StuartLC Dec 23 '14 at 18:41
  • 1
    Going to say that is fun... I did Chrome and Firefox, but Firefox is now having the problem when I didn't have it before so that is interesting. Going to look into that since nothing changed since I posted.. But Chrome is essentially (not exactly) the same as safari and I don't have safari downloaded here. I did IE all versions as well, but again that one proved it was happening in all versions. – Cayce K Dec 23 '14 at 18:46
  • @StuartLC adding an IDEA to my answer... Give me 5 minutes – Cayce K Dec 23 '14 at 18:47
  • hah not interested in either. This is an interesting case. `optgroup` should probably have been allowed more functionality, but in reality the `select` should be open to more free reign design. That is more opinion based and I don't have an idea how that would go, but a thought to consider for sure. – Cayce K Dec 23 '14 at 18:53
  • Thanks for taking the time to research + answer this! – StuartLC Dec 30 '14 at 15:18
  • Not a problem! It was an interesting thought! – Cayce K Dec 30 '14 at 15:19