Как сделать несколько select на странице?

Рейтинг: 1Ответов: 1Опубликовано: 11.02.2023

Подскажите пожалуйста как сделать что-бы работало несколько select на странице? и если один открыт другие закрываются? Я новичек в js. Спасибо большое за помощь https://codepen.io/ladyelizaveta/pen/JjBgEML

function selectProductCard() {
    const optionMenu = document.querySelector('.select__menu');
    const selectBtn = document.querySelector('.select__btn');
    const options = document.querySelectorAll('.select__option');
    const sBtntext = document.querySelector('.select__btntext');
    if (optionMenu) {
        selectBtn.addEventListener("click", function (e) {
            optionMenu.classList.toggle("_active")
        });
        options.forEach(option => {
            option.addEventListener("click", function (e) {
                if (document.querySelector('.select__option-text') != null) {
                    const selectedOption = option.querySelector('.select__option-text-title').innerText + option.querySelector('.select__option-text-tochka').innerText + option.querySelector('.select__option-text-subtitle').innerText;
                    sBtntext.innerText = selectedOption;
                };

                optionMenu.classList.remove("_active")
            });
        });
    }
}

window.addEventListener("DOMContentLoaded", function (e) {
    selectProductCard()
    
});
.select__menu{
  position: relative;
        padding: 12px 12px 12px 16px;
        border: 1px solid #ebe6e1;
        cursor: pointer;
        width: 100%;
        height: 20px;
        border-radius: 4px;
        display: block;
        background-color: rgba(168, 149, 131, 0.04);
        transition: all 0.5s ease 0s;
  margin-bottom: 100px;
}

.select__menu ul{
  list-style: none;
}

.select__menu._active .select__options {
  display: block;
}

.select__options {
  z-index: 100;
        position: absolute;
        top: 30px;
        min-width: 100%;
        left: 0;
        max-height: 400px;
        background-color: #fff;
        border-radius: 4px;
  background: red;
        box-shadow: 0 2px 8px rgb(31 27 22 / 8%);
        padding: 8px;
  display: none;
}
<div class="select__menu">
  <div class="select__btn">
    <span class="select__btntext">
      35
    </span>
  </div>
  <ul class="select__options">
    <li class="select__option">
      <span class="select__option-text">
        <span class="select__option-text-title">35</span>
        <span class="select__option-text-tochka"></span>
        <span class="select__option-text-subtitle"></span>
      </span>
    </li>
    <li class="select__option">
      <span class="select__option-text">
        <span class="select__option-text-title">36</span>
        <span class="select__option-text-tochka"></span>
        <span class="select__option-text-subtitle"></span>
      </span>
    </li>
  </ul>
</div>

<div class="select__menu">
  <div class="select__btn">
    <span class="select__btntext">
      35
    </span>
  </div>
  <ul class="select__options">
    <li class="select__option">
      <span class="select__option-text">
        <span class="select__option-text-title">35</span>
        <span class="select__option-text-tochka"></span>
        <span class="select__option-text-subtitle"></span>
      </span>
    </li>
    <li class="select__option">
      <span class="select__option-text">
        <span class="select__option-text-title">36</span>
        <span class="select__option-text-tochka"></span>
        <span class="select__option-text-subtitle"></span>
      </span>
    </li>
  </ul>
</div>

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Легко:

function selectProductCard() {
    const optionMenus = document.querySelectorAll('.select__menu');

    optionMenus.forEach(optionMenu => {
        const selectBtn = optionMenu.querySelector('.select__btn');
        const options = optionMenu.querySelectorAll('.select__option');
        const sBtntext = optionMenu.querySelector('.select__btntext');

        if (optionMenu) {
            selectBtn.addEventListener("click", function (e) {
                optionMenu.classList.toggle("_active")
            });
            options.forEach(option => {
                option.addEventListener("click", function (e) {
                    if (document.querySelector('.select__option-text') != null) {
                        const selectedOption = option.querySelector('.select__option-text-title').innerText + option.querySelector('.select__option-text-tochka').innerText + option.querySelector('.select__option-text-subtitle').innerText;
                        sBtntext.innerText = selectedOption;
                    };

                    optionMenu.classList.remove("_active")
                });
            });
        }
    })
}

window.addEventListener("DOMContentLoaded", selectProductCard);
.select__menu{
  position: relative;
        padding: 12px 12px 12px 16px;
        border: 1px solid #ebe6e1;
        cursor: pointer;
        width: 100%;
        height: 20px;
        border-radius: 4px;
        display: block;
        background-color: rgba(168, 149, 131, 0.04);
        transition: all 0.5s ease 0s;
  margin-bottom: 100px;
}

.select__menu ul{
  list-style: none;
}

.select__menu._active .select__options {
  display: block;
}

.select__options {
  z-index: 100;
        position: absolute;
        top: 30px;
        min-width: 100%;
        left: 0;
        max-height: 400px;
        background-color: #fff;
        border-radius: 4px;
  background: red;
        box-shadow: 0 2px 8px rgb(31 27 22 / 8%);
        padding: 8px;
  display: none;
}
<div class="select__menu">
  <div class="select__btn">
    <span class="select__btntext">
      35
    </span>
  </div>
  <ul class="select__options">
    <li class="select__option">
      <span class="select__option-text">
        <span class="select__option-text-title">35</span>
        <span class="select__option-text-tochka"></span>
        <span class="select__option-text-subtitle"></span>
      </span>
    </li>
    <li class="select__option">
      <span class="select__option-text">
        <span class="select__option-text-title">36</span>
        <span class="select__option-text-tochka"></span>
        <span class="select__option-text-subtitle"></span>
      </span>
    </li>
  </ul>
</div>

<div class="select__menu">
  <div class="select__btn">
    <span class="select__btntext">
      35
    </span>
  </div>
  <ul class="select__options">
    <li class="select__option">
      <span class="select__option-text">
        <span class="select__option-text-title">35</span>
        <span class="select__option-text-tochka"></span>
        <span class="select__option-text-subtitle"></span>
      </span>
    </li>
    <li class="select__option">
      <span class="select__option-text">
        <span class="select__option-text-title">36</span>
        <span class="select__option-text-tochka"></span>
        <span class="select__option-text-subtitle"></span>
      </span>
    </li>
  </ul>
</div>

Объяснение

Сначала сохраняем все меню в переменную, потом проходимся по ним, но в других переменных где мы указываем элементы, нужно писать не document, а optionMenu (это итератор, вы можете его заметить как аргумент у стрелочной функции в методе forEach). Это нужно для того, чтобы код работал именно для конкретного меню, а не для первого попавшегося элемента в документе.

P.S. Я изменил вашу запись в конце скрипта. (Да, так можно)