JavaScript
3
Вклад в тег
<select name="" id="reservation-select">
<option class="reservation-option _reqSelect" value=""></option>
</select>
<div class="custom-select">
<p class="custom__select__title">
Выберите количество
</p>
<i class="fal fa-angle-up"></i>
<div class="dropdown-select">
<div class="dropdown-item">1</div>
<div class="dropdown-item">2</div>
<div class="dropdown-item">3</div>
<div class="dropdown-item">4+</div>
</div>
</div>
js код
let option = document.querySelector('.reservation-option');
let customSelect = document.querySelector('.custom-select');
let customSelectTitle = document.querySelector('.custom__select__title');
let dropdownSelect = document.querySelector('.dropdown-select');
let selectItem = document.querySelectorAll('.dropdown-item');
customSelect.onclick = function(){
dropdownSelect.classList.toggle('active');
for(let i = 0;i<selectItem.length;i++){
selectItem[i].onclick = function(){
for(let i = 0;i<selectItem.length;i++){
selectItem[i].classList.remove('active');
}
selectItem[i].classList.add('active');
option.value = selectItem[i].innerHTML;
customSelectTitle.innerHTML = selectItem[i].innerHTML;
}
}
}