Selectable <Optgroup> in HTML <Select> Tag

Selectable optgroup in HTML select tag

I don't think you can but you can easily reproduce the visual style with css and thus only have options in your select, so everything is selectable.

.optionGroup {

    font-weight: bold;

    font-style: italic;

}

    

.optionChild {

    padding-left: 15px;

}

<select multiple="multiple">

    <option value="0" class="optionGroup">Parent Tag</option>

    <option value="1" class="optionChild">Child Tag</option>

    <option value="2" class="optionChild">Child Tag</option>

</select>

How to make the option group selectable?

<select multiple>

    <option value="0" label="Parent Tag"></option>

    <option value="1">Child Tag</option>

    <option value="2">Child Tag</option>

</select>

How to make optgroup selectable?

An optgroup can't be made selectable. Only mat-option can be selected. But we can use a workaround by keeping all items in the select as mat-options and add some custom style to differentiate groups. You can refer the accepted answer for a similar question from this link.

Or you can think of using ng-select (link), Groups can be made selectable.

jQuery - Click on optgroup selects all child options

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>

Nesting optgroups in a dropdownlist/select

Ok, if anyone ever reads this: the best option is to add four  s at each extra level of indentation, it would seem!

so:

<select>

 <optgroup label="Level One">

  <option> A.1 </option>

  <optgroup label="    Level Two">

   <option>     A.B.1 </option>

  </optgroup>

  <option> A.2 </option>

 </optgroup>

</select>

Select all child elements after clicking on OPTGROUP

It is because you are not using click event try this:

$("optgroup.opt_group").click(function(e) {

      $(this).children().attr('selected','selected');
    });

Select2 v4.0 make optgroups selectable

This was requested over on GitHub, but realistically it is not actually possible. It was previously possible with a <input />, but the switch to a <select> meant that we now explicitly disallow a selectable <optgroup>.

---

There is a technical barrier here that Select2 will likely never be able to tackle: A standard <optgroup> is not selectable in the browser. And because a data object with children is converted to an <optgroup> with a set of nested <option> elements, the problem applies in your case with the same issue.

The best possible solution is to have an <option> for selecting the group, like you would have with a standard select. Without an <option> tag, it's not possible to set the selected value to the group (as the value doesn't actually exist). Select2 even has a templateResult option (formatResult in 3.x) so you can style it as a group consistently across browsers.

---

Related Topics