jQuery 单击事件未在 optgroup 上触发

Question

我有以下代码 - jsFiddle上的示例

<select>
 <optgroup label="Group1">
   <option value="11">Option 1</option>
   <option value="12">Option 2</option>
 </optgroup>
 <optgroup label="Group2">
   <option value="21">Option 1</option>
   <option value="22">Option 2</option>
 </optgroup>
</select>?

和一些 jquery 代码：

$(document).ready(function() {
$("select optgroup").click(function() {
    alert("Clicked " + $(this).attr("label"));            
});

这看起来很简单。如果我添加onclick="javascript:alert(...);"这似乎有效......除了无论点击什么都会触发点击。

为什么这不起作用？

谢谢你的帮助！

编辑

我在这里尝试做的事情似乎存在误解，所以我需要稍微扩展代码以提供更好的想法。

我的目标是能够做到以下几点：

$(document).ready(function() {
   $("select optgroup").children().hide();
   $("select optgroup").click(function() {
      $(this).children().show();
   });

如您所见，在选项上捕获单击事件然后确定组将不起作用，因为选项将全部隐藏。我希望在您单击组 (optgroup) 时显示选项。话虽如此，Chrome 似乎并不尊重对组的点击，而 IE 仅返回所选项目的组（当您单击 optgroup 时）项目。

Answer 1

所以对此的简短回答似乎是这是不可能的。不可能使用 optionGroups 进行正常选择并将其转换为手风琴样式的选择列表，其中最初仅显示选项组项目，单击选项组项目会展开其子项（选项）。

似乎没有浏览器真正支持单击选择列表中的组项目。虽然存在 onClick 事件，但该事件的行为更像是您单击了所选项目。