Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.04.2021, 21:11
Интересующийся
Отправить личное сообщение для lev90 Посмотреть профиль Найти все сообщения от lev90
 
Регистрация: 31.01.2021
Сообщений: 10

Кастомный 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>
Ответить с цитированием
  #2 (permalink)  
Старый 14.04.2021, 21:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,763

Сообщение от lev90
Есть небольшой скрипт
где?
вот его и сделайте в цикле, по блокам select-box
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
заставить выбрать select AlexSergeev1990 jQuery 2 17.08.2017 12:46
Вычисления с несколькими выпадающими списками select volshebnyi Events/DOM/Window 3 29.10.2016 00:14
Необходимо заставить работать слайдбар kosite Javascript под браузер 1 07.08.2014 08:25
нужно заставить одновременно работать слайдер и модальное окно обратной связи kvant355 Javascript под браузер 3 22.07.2013 15:34
как заставить jQuery работать с переменными gooody jQuery 1 19.02.2010 12:10