Select optgroup 的子项仅在标签点击时

Question

我正在尝试使用 optgroup 标签来 select 组中的所有选项。

这工作正常，但是，当我也 select 一组 <option> 它 select 所有 optgroup 元素。我如何做到 selection 仅基于 optgroup 标签？

$(document).ready(function() {
  $("optgroup").on("click", function() {
    $(this).children("option").prop("selected", true);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <optgroup label="Group1">
    <option value="11">Option 1</option>
    <option value="12">Option 2</option>
  </optgroup>
  <optgroup label="Group2">
    <option value="21">Option 1</option>
    <option value="22">Option 2</option>
  </optgroup>
</select>

Answer 1

检查元素的标签名称，因为它会冒泡..循环遍历每个选项，只检查未选中的选项。

$(document).ready(function() {
  $("optgroup").on("click", function(e) {
    if(e.target.tagName === 'OPTGROUP'){
      $(this).children("option").each(function(){
        this.selected = !this.selected;
      });
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple size=6>
  <optgroup label="Group1">
    <option value="11">Option 1</option>
    <option value="12">Option 2</option>
  </optgroup>
  <optgroup label="Group2">
    <option value="21">Option 1</option>
    <option value="22">Option 2</option>
  </optgroup>
</select>

Select optgroup 的子项仅在标签点击时

Select children of optgroup only on tag click

javascript

jquery

jquery-selectors

optgroup