jQuery

Question

如何使 select 标签中的 optgroup 在 html 中可点击。当我们点击这个标签时，它的所有子选项都应该 selected.

示例：选择带有标签 Swedish Cars 的 optgroup 应该会自动 select 沃尔沃和 Saab 选项。

<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 例如

<select id="selectgroup">

然后将 class 添加到您的 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 那么它将 select optgroup 下的所有选项。

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

jQuery - Click on optgroup selects all child options

html

html-select

optgroup