如何在不同的浏览器中处理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;
}

在这里

然而：

• Chrome 38忽略的cursorCSS optgroup，并完全忽略事件点击
• Firefox 32支持cursorCSS，并直接忽略上的click事件optgroup。
• IE 11会在单击时触发click事件optgroup，但会data-id报告optgroup最后选择的“选项”的，这将是错误的，除非最后一个子选项在父项下偶然出现optgroup。

在中jQuery 2.1.0，如果单击下方的子选项之一optgroup而不是Chrome ，则IE和FireFox将引发click事件。

这三个浏览器对于是否optgroup应将应用到的背景css颜色应用到子对象也有不同的意见selects。

更不用说缺乏对嵌套optgroup的支持

然后，这导致了替代性黑客的做法，即optgroup喜欢  option使用具有不同CSS样式的select中的缩进group headers，从而失去了键盘选择的可用性。

TL; DR
所以我的问题是，optgroup至少从4.01开始使用html 但似乎一直停留在笨拙的角落（图表A：W3C Wiki底部的 optgroup链接给出了404）。为什么是这样？，因此optgroup在标准化之前是否有解决方案（例如库-modernizr，jQuery-plugin）？

编辑

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

Answer 1

我将在此处给出答案，并尝试给出一些观点。optgroupHTML中的标签并非旨在被单击，选择或使用。它旨在成为用户了解特定选项集与先前选项集不同的指导工具。正如您最可能意识到的那样，我提供此信息的目的是为了指导您进入我所提供的产品。

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

该代码将注册id从值data的的optgroup，当用户selects选择一个选项。这比点击的可能性更高optgroup。考虑用户如何查看您的数据。他们将查看选择并查看分离的数据。他们可能会使用来optgroup作为所需的正确选项的指南，但是他们不太可能尝试单击它。

我想您想提供与这些事件有关的信息事件，optgroup可惜我不知道该如何提供。收听change事件可能是提供有关该事件的信息，提供弹出窗口，信息性文本或您能想到的任何要点的最佳机会。

请在评论中提供更多信息，以帮助我为您提供帮助。我不了解您的目标或为什么需要此功能，但我想尝试并帮助您向正确的方向发展。

CSS编辑

所以您提出了关于CSS的观点，我想我有一个答案。想象optgroup作为div元素和options作为内部项目。现在，实际上它们以任何方式进行布局，因此不难想象这一点。

现在...当你给的CSS optgroup说：background: red：在optgroup单独本身应该转换，但在现实中optgroup正在其内容的高度option在s。或内在元素。在大多数浏览器中，我会假设（由于optgroup很少使用）option标记具有默认的背景颜色，transparent因此默认的背景颜色允许或select的背景颜色。在这种情况下，看起来像是的颜色，但实际上它们没有基。通过将CSS更改为默认选项，我们可以解决此问题。white#ffffffoptionsoptgroup

option{
    background: #fff;
}

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