CODEWITHSUNDEEP
jqueryhtmlhtml-selectoptgroup
Rameez
Rameez

Reputation: 21

jQuery - Click on optgroup selects all child options

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>

Upvotes: 1

Views: 5726

Answers (3)

sergiol
sergiol

Reputation: 4335

If somebody wants a solution for a case where what is desired is to select all the children when the optgroup title is selected, here it goes.

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

Upvotes: 0

Maitri
Maitri

Reputation: 49

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.

Upvotes: 0

Richard Hamilton
Richard Hamilton

Reputation: 26444

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>

Upvotes: 1

Related Questions