Установить обработчик событий на choices.js

   const multiSelect = () => {
        const elements = document.querySelectorAll('.vacancies__select-wrapper');
        elements.forEach(el => {
            const choices = new Choices(el, {
                searchEnabled: false,
                itemSelectText: '',
                shouldSort: false,
            })
        });
    };
    
    multiSelect();
.vacancies__select-box {
    width: 292px;
}

.vacancies__filter-popup {
    left: 0;
    top: 0;
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 10;
    display: grid;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: visibility .3s ease, opacity .3s ease;
}

.vacancies__filter-popup__wrapper {
    position: relative;
    display: flex;
    z-index: 1;
    max-width: 367px;
    width: 100%;
    background-color: var(--color_white);
    border-radius: 5px;
    transform: scale(0);
    transition: transform .3s ease;
}

.delete__container {
    padding: 25px;
}

.delete__title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.delete__attent {
    width: 95%;
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 40px;
}

.delete__choose {
    display: flex;
    justify-content: space-between;
}

.delete__yes {
    font-size: 15px;
    font-weight: 400;
    background-color: var(--color_pink);
    color: var(--color_red);
    padding: 11px 20px;
    border-radius: 5px;
}

.delete__no {
    background-color: var(--color_zircon);
    padding: 11px 20px;
    color: var(--color_dodger);
    border-radius: 5px;
}
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/public/assets/styles/choices.min.css"
/>

<div class="vacancies__select-box">
                        <select name="select" class="vacancies__select-wrapper">
                            <option value="">Выберите действие</option>
                            <option value="Удалить">Удалить</option>
                            <option value="Переместить в архив">Переместить в архив</option>
                        </select>
                    </div>
                    
                    <div class="vacancies__filter-popup" id="choose-del-modal-filter">
                    <div class="vacancies__filter-popup__wrapper delete">
                        <div class="delete__container">
                            <div class="delete__title">Удаление вакансии</div>
                            <div class="delete__attent">Выделенные вакансии <span class="delete__amount">(10)</span>
                                будут удалены. Вы&nbsp;действительно
                                хотите это сделать?
                            </div>
                            <div class="delete__choose">
                                <button class="btn-reset delete__yes">Удалить</button>
                                <button class="btn-reset delete__no">Отмена</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <script src="https://cdn.jsdelivr.net/npm/[email protected]/public/assets/scripts/choices.min.js"></script>

Как установить обработчик событий на элемент выпадающего списка? Нужно что бы, к примеру, при нажатии на кнопку "Удалить", появлялся попап с предупреждением и подтверждением\отмены действия. Изначально вызывал элемент с помощью getElementById, потом узнал что option работает только с data аттрибутами. Данный способ не совсем понимаю, так как ни разу jQuery не пользовался, а именно с ним 9\10 решений связанно. Есть другой момент не менее важный, что choices.js как плагин меняет разметку документа для своей среды исполнения. Проще говоря от обычного html остается только родитель - select. Option'ы заменены на див-компоненты плагина. У них конечно же так же есть дата данные, но вызвать пока что не удалось. У дива есть свой айди, который периодически меняется, говоря об этом, несколько один раз вызвать через getElementId, но потом айди сменился.снимок того как выглядит разметка после развертывания плагина

код из html:


Ответы (0 шт):