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

9
  • 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. Commented Nov 1, 2014 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 Commented Nov 1, 2014 at 11:46
  • 1
    stackoverflow.com/a/11579998/1981678
    – BReal14
    Commented Dec 23, 2014 at 15:27
  • 2
    nesting is disallowed by the spec (last paragraph in w3.org/TR/html401/interact/forms.html#h-17.6 and content model in w3.org/TR/html5/forms.html#the-optgroup-element) Commented Dec 23, 2014 at 15:27
  • 2
    building custom select box with group options will be a better idea Commented Dec 28, 2014 at 12:07

1 Answer 1

5
+50

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.

7
  • 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
    Commented Dec 23, 2014 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
    Commented Dec 23, 2014 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
    Commented Dec 23, 2014 at 18:46
  • @StuartLC adding an IDEA to my answer... Give me 5 minutes
    – Cayce K
    Commented Dec 23, 2014 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
    Commented Dec 23, 2014 at 18:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.