Tengo un Select personalizado con JavaScript que funciona perfecto, el único problema es que al querer agregar otro Select este no me muestra el contenido que se está seleccionando, este se muestra en el primero. Lo que quiero hacer es crear una función que se pueda ejecutar en múltiples Select y que las opciones se muestren en sus respectivos Select.
¿Hay alguna manera de hacer que se ejecute sin la necesidad de volver a crear la función o de declarar múltiples ID?
document.querySelectorAll('.options .option').forEach((opcion) => {
const opciones = document.querySelector('.options');
const contenidoSelect = document.querySelector('.select .select-content-text');
opcion.addEventListener('click', (e) => {
contenidoSelect.innerHTML = e.currentTarget.innerHTML;
});
});
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background: #F1F1F1;
font-family: 'Segoe UI', 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.selectbox {
min-width: 200px;
}
input {
display: none;
}
input:checked+label .options {
display: block;
}
label {
display: block;
width: 100%;
height: auto;
pointer-events: all;
position: relative;
}
.select {
width: 100%;
padding: 7px 14px;
background: #FFFFFF;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, .10);
cursor: pointer;
}
.select span {
font-size: 11px;
font-weight: 600;
color: #0984e3;
display: block;
margin-bottom: 3px;
}
.select-content-text {
display: flex;
justify-content: flexsta;
align-items: center;
}
.select-content-text p {
margin-left: 8px;
font-weight: 500;
}
.options {
width: 100%;
position: absolute;
top: 58px;
left: 0;
display: none;
z-index: 1;
padding: 5px;
background: #FFFFFF;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, .10);
}
.option {
width: 100%;
padding: 8px 14px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.option p {
margin-left: 8px;
font-weight: 500;
}
.option:hover {
background: #EDEDED;
cursor: pointer;
border-radius: 8px;
}
.circle {
background: black;
width: 12px;
height: 12px;
border-radius: 50%;
}
.rojo {
background: red;
}
.azul {
background: blue;
}
.verde {
background: green;
}
<div class="selectbox">
<input type="checkbox" id="color-selector">
<label for="color-selector">
<div class="select">
<span>Color:</span>
<div class="select-content-text">
<div class="circle rojo"></div>
<p class="texto">Rojo</p>
</div>
</div>
<div class="options">
<a class="option">
<div class="circle rojo"></div>
<p class="texto">Rojo</p>
</a>
<a class="option">
<div class="circle azul"></div>
<p class="texto">Azul</p>
</a>
<a class="option">
<div class="circle verde"></div>
<p class="texto">Verde</p>
</a>
</div>
</label>
</div>
<div class="selectbox">
<input type="checkbox" id="color-selector2">
<label for="color-selector2">
<div class="select">
<span>Color:</span>
<div class="select-content-text">
<div class="circle rojo"></div>
<p class="texto">Rojo</p>
</div>
</div>
<div class="options">
<a class="option">
<div class="circle rojo"></div>
<p class="texto">Rojo</p>
</a>
<a class="option">
<div class="circle azul"></div>
<p class="texto">Azul</p>
</a>
<a class="option">
<div class="circle verde"></div>
<p class="texto">Verde</p>
</a>
</div>
</label>
</div>