Как скрыть пустой select в Joomla при печати

При разработке на CMS Joomla часто возникает задача стилизации кастомного выпадающего списка с множественным выбором (мультивыбор). Особенно остро стоит вопрос: как скрыть пустой элемент <select> при печати страницы, если в нём нет динамических классов, показывающих количество выбранных опций. Стандартный CSS-псевдокласс :empty не работает для тега <select>, даже если в нём нет выбранных элементов. Разберём причины и предложим надёжные решения.

Почему select:empty не работает

Псевдокласс :empty в CSS предназначен для элементов, у которых нет дочерних узлов (включая текстовые). Однако тег <select> всегда содержит как минимум один дочерний элемент - <option>. Даже если у вас пустой список опций, в DOM-дереве присутствует элемент <option>, поэтому браузер не считает <select> пустым. Это объясняет, почему select:empty { display: none; } не срабатывает.

Рабочие способы скрыть пустой select

1. JavaScript проверка при печати

Самый надёжный метод - использовать JavaScript для анализа количества выбранных опций прямо перед печатью. В Joomla часто применяются кастомные JS-библиотеки для мультивыбора, поэтому можно повесить обработчик на событие beforeprint.

window.addEventListener('beforeprint', function() {
    var selects = document.querySelectorAll('select[multiple]');
    selects.forEach(function(select) {
        var selectedCount = select.selectedOptions.length;
        if (selectedCount === 0) {
            select.style.display = 'none';
        } else {
            select.style.display = '';
        }
    });
});
window.addEventListener('afterprint', function() {
    var selects = document.querySelectorAll('select[multiple]');
    selects.forEach(function(select) {
        select.style.display = '';
    });
});

Этот скрипт скрывает пустые поля <select> только при печати, а после завершения печати возвращает их видимость.

2. CSS-медиа-запрос print с дополнительным классом

Если вы можете модифицировать шаблон Joomla, добавьте в разметку условный класс. Например, при рендеринге поля проверяйте количество выбранных значений на сервере (PHP) и присваивайте класс empty-select. Затем в CSS пропишите:

@media print {
    select.empty-select {
        display: none;
    }
}

Этот подход требует доработки кода компонента или модуля, но он полностью исключает использование JavaScript.

3. Использование атрибута data-* и CSS attr()

Можно динамически проставлять атрибут data-count через JS при изменении выбора. После этого в CSS используйте:

@media print {
    select[data-count='0'] {
        display: none;
    }
}

Этот метод удобен, если вы уже используете JavaScript для управления мультивыбором в Joomla.

Особенности реализации в Joomla

В Joomla кастомный select с мультивыбором часто создаётся через системные плагины или расширения (например, Chosen или Select2). В таких случаях оригинальный элемент <select> может быть скрыт, а отображается его JS-копия. Тогда вам нужно скрывать именно визуальный контейнер, а не сам <select>. Проверьте, какой DOM-элемент отвечает за отображение списка, и применяйте скрипты к нему.

Заключение

Скрыть пустой <select> в Joomla при печати стандартным CSS-псевдоклассом :empty невозможно из-за особенностей DOM. Используйте JavaScript-обработчики событий печати, серверную проверку с добавлением класса или динамические атрибуты данных. Выберите метод, который лучше всего вписывается в архитектуру вашего сайта на Joomla.