如何处理不同浏览器中optgroup的不同行为？

Question

我希望能够轻松添加功能，以便能够直接点击optgroup

中的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>

支持jQuery

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

和css：

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

Jsfiddle here

然而

• Chrome 38忽略cursor的{​​{1}} css，忽略完全点击的事件
• Firefox 32尊重optgroup css，并直接忽略cursor上的点击事件。
• IE 11会在点击optgroup时触发点击事件，但optgroup会报告上次选择的'选项'的data-id，除非是最后一个子选项，否则这将是错误的偶然地在父optgroup下面。

在optgroup中，如果点击了jQuery 2.1.0下方的某个子选项，则IE和FireFox会引发点击事件，而不是Chrome。

然后，三个浏览器对于应用于optgroup的背景css颜色是否应该应用于孩子optgroup也有不同的意见。

更不用说缺乏对nested optgroups

的支持了

然后导致selects到optgroup的练习，例如  option缩进，group headers的css样式不同，这会丢失键盘选择可用性。

TL; DR
所以我的问题是，optgroup已经在html中，因为至少alternative hacks 似乎已经陷入了笨拙的角落（图表A：4.01上的optgroup链接给出一个bottom of the W3C wiki）。为什么会这样？，那么在optgroup标准化之前是否有解决方案（例如library-modernizr，jQuery-plugin）？

修改

这是我在Windows 8.1 PC上使用的4种浏览器的CSS差异小提琴图片 - 只有FF显示光标; FF和IE也将OptGroup的background-color应用于选项。

Answer 1

我将在这里给出一个答案并尝试给出一点看法。 HTML中的optgroup标记不是为了点击，选择或使用而设计的。它旨在成为一个指导工具，供用户理解一组特定的选项与前一组选项不同。由于您很可能意识到这一点，我提供此信息是为了引导您进入我所提供的内容。

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

当用户id选项时，此代码将从data的{​​{1}}注册optgroup值。与点击selects的人相比，这种情况更有可能发生。考虑用户将如何查看您的数据。他们将查看选择并查看分离的数据。他们可能会使用optgroup作为他们想要的正确选项的指南，但他们不太可能尝试点击它。

我想你想用这些optgroup提供某种信息事件，遗憾的是我不知道如何提供这些信息。聆听optgroup事件可能是您提供有关信息的最佳机会，并提供您的弹出窗口，信息文本或您可以想到的任何内容以获得优势。

请在评论中提供更多信息，以帮助我。我不了解您的目标或您想要此功能的原因，但我想尝试帮助您指导正确的方向..

CSS编辑

所以你提出了一个关于CSS的观点，我想我有一个答案。想象一下change为optgroup元素，div为内部项。现在实际上它们都是以任何方式排列的，因此不应该想象这一点。

现在......当你给options的css说：optgroup时：background: red本身应该被转换，但实际上optgroup正在接受其内容的高度为optgroup s里面。或内在元素。在大多数浏览器中，我会假设（因为很少使用option）optgroup标记的默认背景颜色为option，这使得transparent的背景颜色为{ {1}}或select。在这种情况下，white似乎采用#ffffff的颜色，但实际上它们没有基础。通过更改css以使选项具有默认值，我们可以解决此问题。

options

在IE，Firefox和Chrome的所有版本中，这会删除您从optgroup看到的红色。