jQuery - Click on optgroup selects all child options

Question

How can I make an optgroup in a select tag clickable in html. When we click this label, all its child options should be selected.

Example: Selecting the optgroup with label Swedish Cars should automatically select the Volvo and Saab options.

<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 elements have a multiple attribute for selecting multiple values.

Here is one possible solution.

In this code, if you click on one of the option group label, all sub-options will be selected automatically.

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

First give id to your select for example

<select id="selectgroup">

and then add class to your optgroup like

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

and then add this

$('#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');
       }
    });

If you click on optgroup then It will select all the options under the optgroup.