jQuery click事件未在optgroup上触发

我有以下代码-

这似乎很直截了当。如果我添加

onclick=“javascript:alert（…）；”

这似乎很有效。。。除了无论单击什么都会触发单击

为什么这样不行

谢谢你的帮助

编辑

我在这里尝试做的事情似乎存在误解，所以我需要对代码进行一些扩展，以给出更好的想法

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

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

如您所见，捕获选项上的单击事件，然后确定组将不起作用，因为所有选项都将被隐藏。我希望在单击组（optgroup）时显示选项。话虽如此，Chrome似乎并不尊重点击组，IE只返回所选项目的组（当你点击一个optgroup）项目

注

---

.click（）

是您使用的错误事件。请参见

，因此关于这一点的简短回答似乎是这是不可能的。不可能使用optiongroup进行常规选择，并将其转换为手风琴样式的选择列表，其中最初仅显示optiongroup项，单击optiongroup项可展开其子项（选项）

---

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

有一个复杂的解决方案，允许您在多个select中侦听optgroup上的click事件。其思想是监听父选择项上的单击，并计算用户是否单击了optgroup标题

$('#multipleSelectId').click(function(event) {
    var y = event.pageY - $(this).offset().top;
    var row = Math.floor((y - 4) / 15);
    $(this).find('optgroup').each(function() {
        if (row == 0) {
            onOptgroupClick($(this));       
            return false;
        }
        row -= $(this).children().length + 1; 
    });
});

这种方法已经在Chromium30、Firefox25和IE9上进行了测试

---

我不知道它是否可以应用于单个选择，但使用“multiple=multiple”它就像一个符咒一样工作。

以下是使用jQuery解决它的方法

首先将事件分配给optgroup，然后查看传播是否已停止

$('optgroup').on('click',function(e) {
    if(!e.isPropagationStopped()){
        if ($(this).find('option:visible').length == $(this).children().length) {
            $(this).children().hide();
        }
        else {
            $(this).children().show();
        }
    }
});

接下来，我们要防止在单击其中一个子选项时触发上一段代码

$('optgroup > option').on('click',function(e) {
    e.stopPropagation();
    $(this).parent().trigger('change');
});

在函数末尾调用的“触发器”事件用于确保更改事件上的任何其他指定触发器仍被触发。

<select>
<optgroup onclick="$(this).children().toggle();">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</optgroup>
</select>
<script>
    $( "option" ).click(function( event ) {
      event.stopPropagation();
    }); 
</script>

项目1
项目2
项目3
$（“选项”）。单击（函数（事件）{
event.stopPropagation（）；
}); 

您将onclick=“etc.”添加到什么内容？你希望点击的具体目的是什么？好吧，我注意到它“有点”似乎在IE中起作用，但在Chrome中不起作用。我说“有点”，是因为我真正想要的是点击群组而不是选择一个选项。最终想要的效果是创建一个手风琴效果，点击群组可以扩展群组并显示选项，同时隐藏其他群组的选项。只有在firefox中，你的也可以在chrome中使用。这里使用的

“click”

是错误的事件，因此+1使用

“change”

使用您的代码，我意识到他想做什么。。令人惊讶的是你能理解。事实上，这段代码并不是我想要的。我希望实际上能够单击组（optgroup），而不是选项。请参见上面我的“最终预期效果”。

$('optgroup').on('click',function(e) {
    if(!e.isPropagationStopped()){
        if ($(this).find('option:visible').length == $(this).children().length) {
            $(this).children().hide();
        }
        else {
            $(this).children().show();
        }
    }
});

$('optgroup > option').on('click',function(e) {
    e.stopPropagation();
    $(this).parent().trigger('change');
});

<select>
<optgroup onclick="$(this).children().toggle();">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</optgroup>
</select>
<script>
    $( "option" ).click(function( event ) {
      event.stopPropagation();
    }); 
</script>