[lev90]

Добрый вечер!

Я новичок в 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>