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.

To hide the empty filter items, please add the CSS from below either in your child theme's stylesheet (style.css) or add them in Divi > Theme Options > Custom CSS.

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.