jQuery - 单击 optgroup 选择所有子选项

Question

如何在 html 中使选择标签中的 optgroup 可点击。当我们单击此标签时，应选择其所有子选项。

示例：选择带有标签瑞典汽车的

optgroup

应自动选择沃尔沃和萨博选项。

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Answer 1

Select

元素具有用于选择多个值的

multiple

属性。

这是一种可能的解决方案。

在此代码中，如果单击选项组标签之一，将自动选择所有子选项。

$("optgroup").on("click", function() {
    $(this).children("option").prop("selected", "selected");
    $(this).next().children("option").prop("selected", false);
    $(this).prev().children("option").prop("selected", false);
});

select {
  height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Answer 2

首先为您的选择提供 id 例如

<select id="selectgroup">

然后将课程添加到您的 optgroup 中，例如

  <optgroup label="Swedish Cars" class="select2-result-selectable">

然后添加这个

$('#selectgroup').select2({

    }).on('select2-selecting', function (e) {
        debugger;
        var $select = $(this);
        if (e.val == undefined) {
            e.preventDefault();
            var childIds = $.map(e.choice.children, function (child) {
                return child.id;
            });
            $select.select2('val', $select.select2('val').concat(childIds));
            $select.select2('close');
       }
    });

如果您点击 optgroup 那么它将选择 optgroup 下的所有选项。

Answer 3

如果有人想要一个解决方案，希望在选择

optgroup

标题时选择所有子项，那么就可以了。

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

select {
  height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>