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