Clever Geek Handbook

How to deal with different behavior for optgroup in different browsers?

I expected you to be able to easily add functionality to be able to click optgroup

directly intoselect 

<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 support of jQuery 

$("#MySelect").on('click', 'optgroup', function() {
    alert($(this).data('id'));
});

And the css:

#MySelect optgroup {
    background-color: orange;
    cursor: pointer;
}

Jsfiddle here

However:

  • Chrome 38 ignore cursor

    css for optgroup

    and ignore full button click
  • Firefox 32 rewards cursor

    css and ignores the click event directly on optgroup

    .
  • IE 11 fires a click event on click optgroup

    , but data-id

    reports optgroup

    the last selected option "which will be incorrect unless the last child option is angrily lower than the parent optgroup

    .

In jQuery 2.1.0

IE and FireFox will raise a click event if one of the child options below is clicked optgroup

, but not Chrome.

There are also different opinions in the three browsers as to whether to apply a css background color optgroup

to a child element selects

or not.

And not to mention the lack of support for nested optics groups

Which then leads to the practice of alternative hacks before optgroup

, such as &nbsp;

option

padding when selecting with different css styles for group headers

, which loses keyboard usability.

TL; DR
So my question: has optgroup

been in html since 4.01 but seems to be stuck in the corner of dunce (Appendix A: link to optgroup at 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

standardized?

Edit

Here is a Screenshot image of CSS variances with four browsers I got on a Windows 8.1 PC - only FF shows the cursor; FF and IE apply OptGroup background-color

to parameters.

CSS differences for Opgroup

+3


source to share


1 answer


I'm going to give an answer here and try to give a little perspective. The optgroup

HTML tag is not meant to be clicked, selected or used. It is intended to be a guideline for the user to understand that a certain set of parameters is not the same as a previous set of parameters. Since you are most likely aware of this, I am providing this information for the purpose of guiding you into what I am proposing.

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

This code will register the value id

from data

optgroup

when the user selects

chooses. This is more likely to happen than someone clicking on optgroup

. Think about how the user will see your data. They will look at the selection and see the split data. They can use it optgroup

as a guide to the correct parameter they want, but they are less likely to try to click on it.

I am assuming you want to provide some kind of informational event with these optgroup

and unfortunately I do not know how to provide this. Listening to an event change

is probably your best chance to provide information about it and provide your popups, informational text, or whatever you can ever think of to get a strong point.

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



CSS EDIT

So you've brought up a question about CSS, and I think I have an answer. Present optgroup

as an element div

and options

as internal elements. Now they are actually laid out this way somehow or other, so it shouldn't be hard to imagine it.

Now ... When you give the css optgroup

say:: background: red

one optgroup

itself needs to be transformed, but actually optgroup

takes up the height of its content option

inside. Or internal elements. In most browsers I would assume (as it is optgroup

rarely used) the tag option

has a default background color transparent

which allows select

for a background color white

or #ffffff

. In this case options

, it appears to take on a color optgroup

, but in fact they have no base. By changing the css to be the default, we'll fix that.

option{
    background: #fff;
}

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

.

+4


source






More articles:


All Articles