optgroup 中的多个 select - 事件的目标是 optgroup

Question

我有一个 select 和一些 optgroup。

<select multiple style="height: 500px; width: 300px">
  <optgroup label="Colours">
    <option value="G">Green</option>
    <option value="B">Blue</option>
    <option value="Y">Yellow</option>
    <option value="W">White</option>
    <option value="P">Pink</option>
  </optgroup>
  <optgroup label="Numbers">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
  </optgroup>
</select>

我希望能够单击 optgroup 和 select 所有 child options。我发现当点击个人 option 时，事件仍然触发，所以通过测试 e.target 我可以确保目标是 optgroup 而只有 select child仁然后。

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

  console.log(target);

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

Fiddle 这里：https://jsfiddle.net/0z61fzs4/

到目前为止，还不错。

但是尝试 multi-select 通过执行 click-and-drag - 在下面的 Fiddle 上，只需从 "One" 向下拖动到 "Three"。此实例中的事件目标最终是 optgroup 本身而不是 option，因此通过 select 以这种方式选择几个选项，您最终会得到 select正在处理 optgroup 中的所有内容。

此行为仅发生在 click-and-drag 类型的 selection 上。它不会发生在 Ctrl 并单击多个 selection.

此外，如果您 "cross a boundary"，则不会发生这种情况。例如，在所附的 fiddle 中，如果您从 "White" 开始，从 click-drag 下降到 "Three"，那么您 multi-select 来自两个不同的组。在这种情况下，目标最终成为 option 并且行为按预期工作。

如何允许我想要的 click-drag 类型行为，在单个 optgroup 中 select 多个 options 而无需 JS 触发和 select全部都看了吗？

Answer 1

也许你可以看看 mousedown/mousemove 组合？有关详细信息，请参阅此线程：How to distinguish mouse "click" and "drag"

Answer 2

尝试将您的点击事件更改为 mouseup 事件，看看是否如您所愿。

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

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

工作示例：https://jsfiddle.net/0z61fzs4/2/

optgroup 中的多个 select - 事件的目标是 optgroup

Multi select within an optgroup - the event's target is the optgroup

html

jquery

optgroup