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

我希望能够轻松添加功能，以便能够直接在 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 的 optgroup css，并完全忽略事件点击

Firefox 32 尊重 cursor css，并直接忽略 optgroup 上的点击事件。

IE 11 在点击 optgroup 时触发 click 事件，但 data-id 报告最后选择的“选项”的 optgroup ，除非最后一个子选项偶然在父 optgroup 下方，否则这将是错误的。

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

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

更不用说缺乏对 nested optgroups 的支持

这导致了 alternative hacks 到 optgroup 的做法，例如   option 在选择中使用不同的 group headers css 样式缩进，从而失去了键盘选择的可用性。

TL;DR
所以我的问题是，optgroup 一直在 html 中，至少从 4.01 开始，但似乎一直被困在笨拙的 Angular 落(图表 A:bottom of the W3C wiki 上的 optgroup 链接给出了 404 )。为什么会这样？，那么在 optgroup 标准化之前是否有解决方案(例如库-modernizr、jQuery-plugin)？

编辑

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

最佳答案

我将在这里给出一个答案并尝试给出一点观点。 HTML 中的 optgroup 标签不是为了被点击、选择或使用而设计的。它旨在成为用户了解特定选项集与前一组选项不同的指导工具。正如您最有可能意识到这一点的，我提供这些信息是为了引导您了解我所提供的内容。

(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 作为内部元素。现在实际上它们以任何方式布置，因此不难想象这一点。

现在......当你给出 optgroup 的 css 时说: background: red : optgroup 本身应该被转换，但实际上 optgroup 正在获取 option 内部的内容的高度。或内部元素。在大多数浏览器中，我会假设(因为 optgroup 很少使用) option 标签具有 transparent 的默认背景颜色，这允许 select 具有 white 或 #ffffff 的背景颜色。在这种情况下， options 似乎采用 optgroup 的颜色，但实际上它们没有基础。通过将 css 更改为选项的默认值，我们解决了这个问题。

option{
    background: #fff;
}

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

关于html - 如何处理不同浏览器中 optgroup 的不同行为？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26688897/