1

Подскажите пожалуйста как сделать что-бы работало несколько 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>

1 ответ 1

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. Я изменил вашу запись в конце скрипта. (Да, так можно)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.