Установить обработчик событий на 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>
будут удалены. Вы действительно
хотите это сделать?
</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: