Collapse/expand optgroups

[smartcorestudio]

It's not an issue - just a feature request.
I think, adding support for expandable optgroups can be useful in some situations. With this feature enabled we'll see only optgroup labels at first. And after clicking the optgroup header it will expand to show all it's options

[ivaynberg]

you can subscribe to the "open" event which is now called after the dropdown is opened and use jquery to modify the dom to create expand collapse twisties.

[Ugoku]

For what it's worth after a year, I needed to do this recently so here's how I did it.

In your CSS, hide the sub results by default:

.select2-result-sub > li.select2-result {
    display: none;
}

Then add this to your Javascript file:

$('.select2-results').on('click', 'li', function(){
    $(this).find('li').show();
});

Although the optgroup has its own Select 2 class, attaching an event handler on either of them (.select2-result-with-children or .select2-result-label) did not work for me.
This method worked fine for me, but your mileage may vary.

[pdwjun]

add the function under below. $(document).ready is not working

$(window).load(function() {
    $('.select2-results').on('click', 'li', function(){
        if($(this).find('li').is(":visible"))
            $(this).find('li').hide();
        else
            $(this).find('li').show();
    });
});

[pirasterize]

$('.select2-results').on('click', 'li', function(){
    $(this).find('li').toggle();
});

[dannyxu2015]

@pirasterize Great!

[lonlie]

Hi guys, This is my solution, Hope it's useful.
https://github.com/lonlie/select2tree

[Ledespana]

Toggling works, but if you keep the dropdown open after a selection(closeOnSelect: false), the group toggles when selecting one of the options.
Any idea about how to toggle the children ONLY when click on the group name?

[hackartisan]

This would be a nice option to add to the core library.

Adding collapsed options on the open event does work, but the scrolling behavior (when the dropdown is reopened after one or more values have been selected) is confusing and much more difficult to override.