code-snippets/hide-disabled-filter-options-for-select2

Hide empty/disabled select2 filters options

By default, Select2 doesn't hide any empty filter options. Instead, it makes them disabled which prevents clicking them. This works well when you only have a few filter options but for large filter options, it might be better to hide them instead.

If you want to hide the disabled filter options globally, use this CSS:

/* Hide disabled (empty) options for select2 globally */
.select2-results__option--disabled {
    display: none;
}

If you want to hide the disabled filter options for particular filter or filter item, use this CSS:

/* Hide disabled (empty) options for select2 in specific filters only */
/* Add the class hide-empty-select2-options to a Filter Posts module or to a particular Filter Item to hide empty options for that particular Filter Posts module or Filter item only */
.hide-empty-select2-options .select2-results__option--disabled {
    display: none;
}

Add this CSS class to the Filter Posts module or the Filter Item: hide-empty-select2-options.