1

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>

1
  • 1
    En tu código solo veo un select... pon alguno más para poder reproducir tu error, gracias
    – masterguru
    Commented el 7 nov. 2022 a las 10:33

1 respuesta 1

2

Hazlo así, usando closest() y e.target para, desde allí, buscar el select correcto, y desde dentro del addEventListener para capturar el elemento clicado:

document.querySelectorAll('.options .option').forEach((opcion) => {
  const opciones = document.querySelector('.options');
  opcion.addEventListener('click', (e) => {
    const contenidoSelect = e.target.closest(".selectbox").querySelector('.select .select-content-text');
    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;
}
<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>

Nota: Aunque funciona seguramente este código se puede optimizar mucho, pues tal como está ahora estas creando muchos addEventListener cuando lo suyo es hacerlo via delegación de eventos. Pero eso ya es otra historia y cambiaría demasiado tu código. Si acaso busca información sobre ello y pruébalo, y si tienes dudas lo vuelves a preguntar.

1
  • Te agradezco muchísimo, buscaré lo de la delegación de eventos ¡Gracias! Commented el 7 nov. 2022 a las 10:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.