Несколько пользовательских элементов выбора ведут себя неправильно ⇐ CSS

[Гость]

• Элемент списка

Я создал на своей странице собственный элемент выбора. Я создал цикл, который проходит через все из них и назначает необходимые EventListeners. Но по какой-то причине, когда у меня есть более одного объекта, все прослушиватели событий назначаются последнему объекту. Должно быть, я делаю что-то не так с параметрами.

проходим по объектам и назначаем им прослушиватели событий.

Код: Выделить всё

let customSelect = document.querySelectorAll(".custom-select");
for (let i = 0; i < 2; i++) {
var selectBtn = customSelect[i].querySelector(".select-button");
var selectedValue = customSelect[i].querySelector(".selected-value");
var optionsList = customSelect[i].querySelectorAll(".select-dropdown li");

// Toggle dropdown visibility when button is clicked
selectBtn.addEventListener("click", function(event) {
customSelect[i].classList.toggle("active");
});

// Handle option selection
for (var x = 0; x < optionsList.length; x++) {
optionsList[x].addEventListener("click", function(event) {
selectedValue.textContent = this.textContent;
customSelect[i].classList.remove("active");
});
}
}

Код: Выделить всё

.select-button {
width: 100%;
font-size: 1.15rem;
background-color: #fff;
padding: 0.675em 1em;
border: 1px solid #caced1;
border-radius: 0.25rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}

.selected-value {
text-align: left;
}

.arrow {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #000;
transition: transform ease-in-out 0.3s;
}

.select-dropdown {
position: absolute;
list-style: none;
width: 100%;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
background-color: #fff;
border: 1px solid #caced1;
border-radius: 4px;
padding: 10px;
margin-top: 10px;
max-height: 200px;
overflow-y: auto;
transition: 0.5s ease;
transform: scaleY(0);
opacity: 0;
visibility: hidden;
}

.select-dropdown:focus-within {
box-shadow: 0 10px 25px rgba(94, 108, 233, 0.6);
}

.select-dropdown li {
position: relative;
cursor: pointer;
display: flex;
gap: 1rem;
align-items: center;
}

.select-dropdown li label {
width: 100%;
padding: 8px 10px;
cursor: pointer;
}

.select-dropdown::-webkit-scrollbar {
width: 7px;
}

.select-dropdown::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 25px;
}

.select-dropdown::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 25px;
}

.select-dropdown li:hover,
.select-dropdown input:checked~label {
background-color: #f2f2f2;
}

.select-dropdown input:focus~label {
background-color: #dfdfdf;
}

.select-dropdown input[type="radio"] {
position: absolute;
left: 0;
opacity: 0;
}

.custom-select.active .arrow {
transform: rotate(180deg);
}

.custom-select.active .select-dropdown {
opacity: 1;
visibility: visible;
transform: scaleY(1);
}

Код: Выделить всё

  habadaba


[list]
[*]

shubi

[*]

dubi

[*]

Bubi

[*]

dubi

[*]

FM2

[*]

AM1

[*]

Really

[*]

cool

[*]

other

[/list]





shlala


[list]
[*]

balala

[*]

malala

[*]

talala

[*]

googoo

[*]

gaga

[*]

yalala

[*]

malala

[*]

sdsdsds

[*]

other

[/list]

Подробнее здесь: https://stackoverflow.com/questions/781 ... -correctly