<form action="/">
<div class="select-block">
<div class="select-main">Please choose one</div>
<div class="select-choose">
<ul>
<li class="li">Select 1</li>
<li class="li">Select 2</li>
<li class="li">Select 3</li>
</ul>
</div>
</div>
<div class="select-block">
<div class="select-main">Please choose again</div>
<div class="select-choose">
<ul>
<li class="li">Select 1</li>
<li class="li">Select 2</li>
<li class="li">Select 3</li>
</ul>
</div>
</div>
</form>
form {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 20px;
}
.select-block {
width: 150px;
}
.select-main {
padding: 10px;
background-color: #F90;
cursor: pointer;
}
.select-choose {
display: none;
width: 150px;
margin-top: 7px;
ul {
}
li {
background-color: #F60;
padding: 5px 10px;
cursor: pointer;
}
}
.active-select-choose {
display: block;
}
View Compiled
const selectBlocks = document.querySelectorAll('.select-block');
const activeClassName = 'active-select-choose';
selectBlocks.forEach(block => {
const chooseElement = block.querySelector('.select-main'),
chooseBlock = block.querySelector('.select-choose'),
chooseBlockAll = document.querySelectorAll('.select-choose'),
chooseItem = block.querySelectorAll('.select-choose li');
chooseElement.addEventListener('click', () => {
chooseBlockAll.forEach((item) => {
if (item !== chooseBlock && item.classList.contains(activeClassName)) {
item.classList.remove(activeClassName);
}
})
console.log(chooseBlock.classList);
if(chooseBlock.classList.contains(activeClassName)) {
chooseBlock.classList.remove(activeClassName);
} else {
chooseBlock.classList.add(activeClassName);
}
})
chooseItem.forEach((item) => {
item.addEventListener('click', () => {
chooseElement.innerText = item.innerText;
chooseBlock.classList.remove(activeClassName);
})
})
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.