jQuery：在选择框中快速选择整个optgroup的简便方法

Question

我使用类似于此线程中的jQuery函数： Easy way to quick select a whole optgroup in select box

但是，当我单击<option>时，它会选择整个optgroup，因为optgroup包含了选项元素。 我使用以下代码段：

  $("optgroup").click(function(e) {
    $(this).children().attr('selected','selected');
  });

我的HTML看起来像这样：

<optgroup label="Abc">
<option value="8" >Ab</option> 
<option value="7" >C</option></optgroup>

因此<option>C</option>上的clickig也会选择<option>Ab</option>。也许我错过了一些明显的东西......

Answer 1

我可能错了，但您可能需要向<option>添加处理程序以停止点击事件冒泡。

像这样简单的帮助：

$("optgroup option").click(function(e) {
    e.stopPropagation();
});

Answer 2

另外，您可以检查optgroup单击处理程序中的目标，如果事件目标实际上是一个选项标记，则会短路，如下所示：

$("optgroup").click(function(e) {
   if ($(e.target).is('option')) return;
   $(this).children().attr('selected','selected');
});