Универсальный селект с тегами и динамическим отображением в одну строку

        
        <div class="webalan__products">
<div class="universal-tag-selector">
    <label>Выберите опции:</label>
    <div class="tag-selector-container">
        <!-- Скрытое поле для хранения выбранных значений -->
        <input type="hidden" name="selected_options" id="selected_options_hidden">

        <!-- Контейнер для отображения выбранных тегов -->
        <span class="selected-tags" id="selected-tags-display">
            <!-- Здесь будут отображаться выбранные теги -->
        </span>

        <!-- Кнопка для открытия выпадающего списка -->
        <button type="button" class="dropdown-toggle">
            <span id="selected-count">+0</span>
            <span uk-icon="triangle-down"></span> <!-- Иконка из UIkit -->
        </button>

        <!-- Выпадающий список с опциями -->
        <div uk-dropdown="mode: click; boundary: ! .tag-selector-container; shift: false; flip: false">
            <ul class="uk-nav uk-dropdown-nav" id="options-list">
                <!-- Опции будут добавлены динамически или статически -->
                <li><a href="#" data-value="option1">Опция 1</a></li>
                <li><a href="#" data-value="option2">Опция 2</a></li>
                <li><a href="#" data-value="option3">Опция 3</a></li>
                <li><a href="#" data-value="option4">Опция 4</a></li>
                <li><a href="#" data-value="option5">Опция 5</a></li>
            </ul>
        </div>
    </div>
</div>

</div>
        
        

        
    // Вспомогательная функция для проверки наличия элемента в массиве
    function in_array(needle, haystack, strict) {
        var found = false, key, strict = !!strict;
        for (key in haystack) {
            if ((strict && haystack[key] === needle) || (!strict && haystack[key] == needle)) {
                found = true;
                break;
            }
        }
        return found;
    }

    jQuery(document).ready(function(){
        let selectedValues = []; // Массив для хранения выбранных значений

        const tagContainer = $('.tag-selector-container');
        const selectedTagsDisplay = $('#selected-tags-display');
        const optionsList = $('#options-list');
        const hiddenInput = $('#selected_options_hidden');
        const selectedCountDisplay = $('#selected-count');

        // Функция для обновления отображения выбранных тегов
        function updateDisplay() {
            selectedTagsDisplay.empty(); // Очищаем текущие отображаемые теги
            const currentValues = selectedValues.slice(); // Создаем копию массива

            // Если ничего не выбрано, показываем "Все опции" (или аналогичный текст)
            if (currentValues.length === 0) {
                selectedTagsDisplay.append($('Все опции'));
                selectedCountDisplay.text("+0");
                hiddenInput.val('');
                return;
            }

            let totalWidth = 0;
            let visibleTagsCount = 0;
            let allVisible = true;

            // Итерируем по выбранным значениям, чтобы определить, какие поместятся
            for (let i = 0; i < currentValues.length; i++) {
                const value = currentValues[i];
                // Находим текст опции по значению
                const optionText = optionsList.find(`a[data-value="${value}"]`).text();
                const tagElement = $(`${optionText}`);

                selectedTagsDisplay.append(tagElement);

                // Проверяем, помещается ли тег в контейнер (учитывая ширину кнопки)
                const tagWidth = tagElement.outerWidth(true);
                totalWidth += tagWidth;

                // 110 - это примерная ширина кнопки и отступов. Требуется тонкая настройка.
                if (totalWidth > tagContainer.width() - 110) {
                    allVisible = false;
                    tagElement.remove(); // Удаляем тег, который не поместился
                    break;
                }
                visibleTagsCount++;
            }

            // Если не все теги поместились, добавляем индикатор "еще X"
            if (!allVisible) {
                const remainingCount = currentValues.length - visibleTagsCount;
                const remainingElement = $(`+${remainingCount}`);
                selectedTagsDisplay.append(remainingElement);
            }

            // Обновляем счетчик выбранных элементов
            selectedCountDisplay.text(`+${selectedValues.length}`);
            // Обновляем скрытое поле
            hiddenInput.val(selectedValues.join(','));
        }

        // Инициализация: обновляем отображение при загрузке страницы
        updateDisplay();

        // Обработчик клика по элементам в выпадающем списке
        optionsList.on('click', 'a', function(event) {
            event.preventDefault();
            const value = $(this).data('value');
            const $this = $(this);

            if (selectedValues.includes(value)) {
                // Удаляем значение, если оно уже выбрано
                selectedValues = selectedValues.filter(v => v !== value);
                $this.removeClass('selected');
            } else {
                // Добавляем значение, если оно не выбрано
                selectedValues.push(value);
                $this.addClass('selected');
            }
            updateDisplay(); // Обновляем отображение
        });

        // Обработчик клика по кнопке удаления тега
        selectedTagsDisplay.on('click', '.remove-tag', function(e) {
            e.preventDefault();
            const $tagItem = $(this).closest('.tag-item');
            const tagText = $tagItem.contents().filter(function() { return this.nodeType === 3; })[0].nodeValue.trim(); // Получаем текст тега

            // Находим значение опции по тексту
            const valueToRemove = optionsList.find('a').filter(function() {
                return $(this).text().trim() === tagText;
            }).data('value');

            if (valueToRemove) {
                selectedValues = selectedValues.filter(v => v !== valueToRemove);
                // Снимаем класс 'selected' с элемента в выпадающем списке
                optionsList.find(`a[data-value="${valueToRemove}"]`).removeClass('selected');
                updateDisplay();
            }
        });

        // Обработчик для открытия/закрытия дропдауна при клике на контейнер (опционально, если UIkit не справляется)
        tagContainer.on('click', function(e) {
            // Если клик был не по кнопке дропдауна и не по элементам внутри него
            if (!$(e.target).closest('.uk-dropdown').length && !$(e.target).closest('.dropdown-toggle').length) {
                $('.dropdown-toggle').trigger('click'); // Имитируем клик по кнопке для открытия/закрытия
            }
        });
    });
    
  

        
<!-- Подключение CSS UIkit -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript..0/dist/css/uikit.min.css" />

<!-- Подключение JavaScript UIkit (иконок) -->
<script src="https://cdn.jsdelivr.net/npm/Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript..0/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript..0/dist/js/uikit-icons.min.js"></script>

<!-- Подключение jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>