Question

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

这很好，但是，当我还选择一个组<option>时，它将选择所有optgroup元素。我如何才能做到仅基于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>

仅在标签点击时选择optgroup的子代

1 个答案: