Добрый вечер!
Я новичок в 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>
