Кастомный select заставить работать с несколькими списками
Добрый вечер!
Я новичок в javascript. Есть небольшой скрипт выпадающего списка на select и радиокнопки, который работает только с одним списком. Если добавить еще один, то скрипт уже не работает. Подскажите пожалуйста, как заставить скрипт обрабатывать несколько списков на странице. Сейчас я использую три скрипта для трех списков. Заранее всем спасибо! const selected = document.querySelector(".selected"); const selected1 = document.querySelector(".selected1"); const selected2 = document.querySelector(".selected2"); const optionsContainer = document.querySelector(".options-container"); const optionsContainer1 = document.querySelector(".options-container1"); const optionsContainer2 = document.querySelector(".options-container2"); const optionsList = document.querySelectorAll(".option"); const optionsList1 = document.querySelectorAll(".option1"); const optionsList2 = document.querySelectorAll(".option2"); selected.addEventListener("click", () => { optionsContainer.classList.toggle("active"); }); selected1.addEventListener("click", () => { optionsContainer1.classList.toggle("active"); }); selected2.addEventListener("click", () => { optionsContainer2.classList.toggle("active"); }); optionsList.forEach(o => { o.addEventListener("click", () => { selected.innerHTML = o.querySelector("label").innerHTML; optionsContainer.classList.remove("active"); }); }); optionsList1.forEach(o => { o.addEventListener("click", () => { selected1.innerHTML = o.querySelector("label").innerHTML; optionsContainer1.classList.remove("active"); }); }); optionsList2.forEach(o => { o.addEventListener("click", () => { selected2.innerHTML = o.querySelector("label").innerHTML; optionsContainer2.classList.remove("active"); }); }); <div class="select-box"> <div class="options-container"> <div class="option"> <label for="automobiles" class="button_cost"> <input type="radio" class="radio" value="" id="automobiles" name="category" /> All</label> </div> <div class="option"> <label for="film" class="button_cost"> <input type="radio" class="radio" value=".pink" id="film" name="category" /> Film</label> </div> <div class="option"> <label for="science" class="button_cost"> <input type="radio" class="radio" value=".blue" id="science" name="category" /> Science</label> </div> </div> <div class="selected"> Select Video Category </div> </div> |
Цитата:
вот его и сделайте в цикле, по блокам select-box |
Часовой пояс GMT +3, время: 13:40. |