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并选择所有孩子options。我发现点击个人option时，事件仍然会被触发，因此通过测试e.target我可以确保目标是optgroup，然后只选择孩子。

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

  console.log(target);

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

在这里小提琴：https://jsfiddle.net/0z61fzs4/

到目前为止，非常好。

然而，在下面的小提琴上点击并拖动，尝试多次选择，只需从＆＃34; One＆＃34;到＆＃34;三＆＃34;。此实例中的事件目标最终为optgroup本身，而不是option，因此通过以这种方式选择几个选项，您最终会选择optgroup中的所有内容。

仅在单击并拖动类型选择时才会出现此问题。使用 Ctrl 并单击多个选择时不会发生这种情况。

此外，如果您跨越边界＆＃34;则不会发生。例如，在附带的小提琴中，如果你从＆＃34; White＆＃34;然后单击并拖动到＆＃34; Three＆＃34;那么你是从两个不同的群体中多选。在这种情况下，目标最终为option，行为按预期工作。

如何允许我想要的点击拖动类型行为，在单个options中选择多个optgroup而不启动JS并全部选择它们？

Answer 1

尝试将您的点击事件更改为鼠标事件，看看它是否按预期工作。

$(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/

Answer 2

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

在optgroup中进行多选 - 事件的目标是optgroup

2 个答案: