Jquery optgroup内的Multi-select-事件的目标是optgroup

我有一个带有一些optgroup的select

在这里拉小提琴：

到目前为止，一切顺利

但是，尝试通过点击并拖动来进行多选-在下面的小提琴上，只需从1拖动到3即可。此实例中的事件目标最终是optgroup本身，而不是选项，因此通过以这种方式选择两个选项，您最终将选择optgroup中的所有内容

此行为仅在单击并拖动类型选择时发生。在按住Ctrl键并单击“多个选择”时，不会出现这种情况

此外，如果您跨越边界，则不会发生这种情况。例如，在所附的小提琴中，如果您从白色开始，单击并向下拖动到三，则您将从两个不同的组中进行多重选择。在这种情况下，目标最终成为选项，行为按预期工作

---

我如何允许我想要的点击-拖动类型行为，在一个optgroup中选择多个选项，而不触发JS并将它们全部选中？

也许您可以看看mousedown/mousemove组合？有关更多信息，请参阅此线程：

尝试将单击事件更改为mouseup事件，并查看其是否按预期工作

$(document).on("mouseup", "optgroup", function(e) {
  var target = $(e.target);

  if (target.is("optgroup")) { 
    target.find("option").prop("selected", true);
  };
});

---

工作示例：

@Abhitalks这个答案对我来说非常有效，没有停顿。我为什么要用这个？@bgs264:没关系。我的主要目的是确保Op写出完整的答案，而不是一行可能被删除的句子。@Abhitalks是的，干杯，伙计，我不经常对StackOverflow做出回应。@Abhitalks我不明白。我已经阅读了好几次这里的答案指南：。并没有说一行有被删除的风险，也并没有说要提供代码示例。你的评论基于什么理由？我认为答案是好的-取代点击鼠标-它是简洁和有效的。我知道如何做到这一点，我不需要一个完整的样本显示一个事件替换为另一个？

$(document).on("click", "optgroup", function(e) {
  var target = $(e.target);

  console.log(target);

  if (target.is("optgroup")) { 
    target.find("option").prop("selected", true);
  }
});

$(document).on("mouseup", "optgroup", function(e) {
  var target = $(e.target);

  if (target.is("optgroup")) { 
    target.find("option").prop("selected", true);
  };
});