2

Estoy imitando el select de los navegadores android pero para un navegador de pc (html,css,jquery).

Mi script funciona bien hasta que vuelvo a cargar un .select--button y me muestra mal seleccionado mi opción.

Acá les dejo mi código

 $("#cual").on("click", function () {
    alert($('input:radio[name=plato]:checked').val());
  });

  $("#action_cancelar_select-plato").on("click", function () {
    $(".select--button").removeClass("active");
    $(".select-plato--gen").hide();
  });




  $(".select-plato--cont .titulo").on("click", function () {
    $(".select-plato--cont .list_items").hide();
    $(this).siblings(".list_items").slideDown();
    $(".select-plato--cont").removeClass("active");
    $(this).parents(".select-plato--cont").addClass("active");
  });

  $("input[type='radio'][name='plato']").on("click",function() {
    var id_act = $(this).val();
    var texto_act = $(this).siblings("label").text();
    $('.select--button.active').attr("data-id-plato",id_act).text(texto_act);
    $(".select-plato--gen").hide();
    $(".select--button").removeClass("active");
  })

  $(".select--button").on("click", function () {
    $(".select--button").removeClass("active");
    var id_actual = $(this).attr("data-id-plato");
    $(this).addClass("active");
    if (!id_actual || id_actual == "0") {
    $(".select-plato--cont").removeClass("active");
    $(".select-plato--cont .list_items").hide();
    $('#valor_defecto_select-plato input[type="radio"][value="0"]').attr("checked", "checked");}
    $(".select-plato--gen").show();
    
    $(".select-plato--cont input").removeAttr("checked");
    $('.select-plato--cont input[type="radio"][value="'+id_actual+'"]').attr("checked","checked");
    $('.select-plato--cont input[type="radio"][value="'+id_actual+'"]').parents(".select-plato--cont").addClass("active");
  });
*,*::before,*::after {  box-sizing: border-box;}
body{font-family: Arial, Helvetica, sans-serif;}


.list_items > div { position: relative; cursor:pointer;  width:100%;}

.list_items div:hover label{
  background:#f1f1f1;
  cursor: pointer;
}

.list_items input {
  opacity: 0;
 height:40px;margin:0;
 width:100%;cursor: pointer;
}
.list_items label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  background: #fff;
  pointer-events: none;height:40px;
    padding:0 10px; border-bottom:1px solid #e8e8e8;
    display:flex;align-items: center;font-size:15px;
}

.r_i{
    border-radius: 50%;
    min-width: 17px;margin-right:7px;
    min-height: 17px;
    background: #fff;
    border: 2px solid #7c7575;transition: all .8s;
}

.list_items div:last-child label {
  border-right: 0;
}
.list_items input:checked + label {
  background: #e6eeff;color:blue;

}
.list_items input:checked + label > .r_i{
  background: blue;
    border-color: white;
    box-shadow: 0 0 0 2px #0000ff;transform: scale(0.9);
}

.select-plato--cont:not(.active) .list_items{display:none;}

.select-plato--gen .body-global{display:flex;justify-content: center;align-items: center;width:100%;height:100%;}
.select-plato--gen .body-global .body{width:400px;box-shadow: 0 0 8px rgba(0,0,0,.3);max-height:calc(100vh - 50px);overflow-x: hidden;
    overflow-y: auto;
    border-radius: 4px;
    }


.select-plato--gen{
    box-shadow: 0 0 8px rgba(105,105,105,0.2), 0 0 1px 1px rgba(208,208,208,0.5);
    background: rgba(0,0,0,.3);
    border-radius: 2px;
    display:none;
    position:fixed;
    width:100vw;height:100vh;top:0;left:0;
}


.select-plato--gen .select-plato--cont:last-child .titulo{
  border-bottom: 0;
}

.titulo{
  background:#fff;
  padding:10px 4px;font-weight:bold;
  border-bottom:2px solid #e8e8e8;
  display:flex;align-items: center;
}

.titulo > img{
  margin-right:5px;width:9px;
}



.titulo:hover{
  background:blue;
  color:#fff;
  cursor:pointer;
}

.select-plato--cont.active .titulo img,.titulo:hover img{
  filter:invert(1);
}
.select-plato--cont.active .titulo{
    background:blue;
  color:#fff;
  cursor:pointer;
  border-bottom-color:blue;

}


.select--button{
        background-color: #fff;
    border: 1px solid #bbbbbb;
    border-radius: 3px;
    color: #4a4a4a;
    display:flex;
    justify-content: space-between;height: 41px;
    align-items: center;padding:0 5px;cursor: pointer;
}
.select--button .icono{
  opacity: .4;font-size:13px;
}


.select--button:hover .icono{
  opacity: 1;
}
.select--button:hover{
 border-color: #0037d6;
    box-shadow: inset 0 0 0 1px #0037d6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <div class="select--button" data-id-plato="0"> Parrilla 1 <div class="icono">&#9660;</div></div><br>
  <div class="select--button" data-id-plato="2"> Parrilla 2 <div class="icono">&#9660;</div></div>



<div style="width:500px" class="">


<div class="select-plato--gen select--modal">
  <div class="body-global">
<div class="body">

    <group id="valor_defecto_select-plato" class="list_items" style="border-radius: 3px;">
    <div><input type="radio" name="plato" value="0"  style="height:50px;"><label><div class="r_i"></div>Seleccionar Plato</label></div>
    </group>

  <div class="select-plato--cont">
  <div class="titulo"><img src="images/iconos/flecha.svg"> Parrillas</div>
  <group class="list_items">
    <div><input type="radio" name="plato" value="1"><label><div class="r_i"></div>Parrilla 1</label></div>
    <div><input type="radio" name="plato" value="2"><label><div class="r_i"></div>Parrilla 2</label></div>
    <div><input type="radio" name="plato" value="3"><label><div class="r_i"></div>Parrilla 3</label></div>
    <div><input type="radio" name="plato" value="4"><label><div class="r_i"></div>Parrilla 4</label></div>
    <div><input type="radio" name="plato" value="5"><label><div class="r_i"></div>Parrilla 5</label></div>

  </group>
  </div><div class="select-plato--cont">
  <div class="titulo"><img src="images/iconos/flecha.svg"> Vinos</div>
  <group class="list_items"> 
    <div><input type="radio" name="plato" value="6"><label><div class="r_i"></div>Vino 1</label></div>
    <div><input type="radio" name="plato" value="7"><label><div class="r_i"></div>Vino 2</label></div>
    <div><input type="radio" name="plato" value="8"><label><div class="r_i"></div>Vino 3</label></div>
    <div><input type="radio" name="plato" value="9"><label><div class="r_i"></div>Vino 4</label></div>
  </group> 
  </div>
  
  <div class="select-plato--cont">
  <div class="titulo"><img src="images/iconos/flecha.svg"> Bebidas</div>
  <group class="list_items"> 
    <div><input type="radio" name="plato" value="10" ><label><div class="r_i"></div>Gaseosa 1</label></div>
    <div><input type="radio" name="plato" value="11" ><label><div class="r_i"></div>Gaseosa 2</label></div>
    <div><input type="radio" name="plato" value="12" ><label><div class="r_i"></div>Gaseosa 3</label></div>
    <div><input type="radio" name="plato" value="13" ><label><div class="r_i"></div>Gaseosa 4</label></div>
  </group> 
</div>

  
  <div class="select-plato--cont">
  <div class="titulo"><img src="images/iconos/flecha.svg"> Bebidas</div>
  <group class="list_items"> 
    <div><input type="radio" name="plato" value="14" ><label>Gaseosa 1</label></div>
    <div><input type="radio" name="plato" value="15" ><label>Gaseosa 2</label></div>
    <div><input type="radio" name="plato" value="16" ><label>Gaseosa 3</label></div>
    <div><input type="radio" name="plato" value="17" ><label>Gaseosa 4</label></div>
  </group> 
</div>
<div style="padding:5px;background:#fff;display:flex;justify-content: flex-end;">
<div id="action_cancelar_select-plato" style="background-color: red;padding:8px;border-radius:3px;color:#fff;cursor: pointer;">Cancelar</div>
</div>
</div>
</div>
</div>
</div>


<div style="margin-top:50px"><button id="cual">Cual ?</button></div>

Funciona bien pero al momento de reabrir el modal no me muestra cuál está seleccionado.

Nota:

La pregunta exacta es:

¿Por qué no me muestra el elemento seleccionado si vuelvo a abrir el modal?

Si hay alguna forma de optimizar mi código javascript también se lo agradezco.

2
  • A mí sí me selecciona la misma opción cuando vuelvo a abrir el mismo modal para la misma opción. Lo que sí me he dado cuenta es que si cambio algo en uno, se mantiene ese marcado al seleccionar el otro. ¿Eso es lo que quieres corregir? Commented el 14 ene. 2021 a las 9:32
  • Cuando puedas le echas un vistazo a la respuesta que redacté. Commented el 14 ene. 2021 a las 12:45

1 respuesta 1

2

El error principal que estás sufriendo es debido al mal uso de attr(atributo, valor) en vez de prop(propiedad, valor) para cambiar el estado de checked:

$('.select-plato--cont input[value="' + id_actual + '"]')
  .prop("checked", true)
  .parents(".list_items")
  .show()
  .parents(".select-plato--cont")
  .addClass("active");

Como ves no es necesario hacer varias llamadas a $('.select-plato--cont input[value="' + id_actual + '"]'), se puede reutilizar la primera para ir propagando los resultados:

  • Marcamos la opción como checked.
  • Al list_items padre le decimos que se muestre.
  • Al select-plato--cont le agregamos la clase active.

Además, SIEMPRE limpio el modal a su valor inicial, para que este código deje activa la opción marcada y no se quede la anterior selección activa.

El código funcionando:

$("#cual").on("click", function () {
  alert('Modal: ' + $('input:radio[name=plato]:checked').val());
  /* Mostramos cada menú seleccionado */
  document.querySelectorAll(".select--button").forEach((e, n) => {
    alert('Menú ' + (n + 1) + ': ' + e.dataset.idPlato);
  });
});

$("#action_cancelar_select-plato").on("click", function () {
  $(".select--button").removeClass("active");
  $(".select-plato--gen").hide();
});

$(".select-plato--cont .titulo").on("click", function () {
  $(".select-plato--cont .list_items").hide();
  $(this).siblings(".list_items").slideDown();
  $(".select-plato--cont").removeClass("active");
  $(this).parents(".select-plato--cont").addClass("active");
});

$("input[type='radio'][name='plato']").on("click",function() {
  var id_act = $(this).val();
  var texto_act = $(this).siblings("label").text();
  $('.select--button.active').attr("data-id-plato",id_act).text(texto_act);
  $(".select-plato--gen").hide();
  $(".select--button").removeClass("active");
});

$(".select--button").on("click", function () {
  $(".select--button").removeClass("active");
  var id_actual = $(this).attr("data-id-plato");
  $(this).addClass("active");
  /* Siempre limpiamos */
  $(".select-plato--cont").removeClass("active");
  $(".select-plato--cont .list_items").hide();
  /* Marcamos la opción 0 si es necesario */
  $('#valor_defecto_select-plato input[type="radio"][value="0"]')
    .prop("checked", id_actual == 0);

  $(".select-plato--cont input")
    .prop("checked", false);

  /* Corregimos los fallos */
  $('.select-plato--cont input[value="' + id_actual + '"]')
    .prop("checked", true)
    .parents(".list_items")
    .show()
    .parents(".select-plato--cont")
    .addClass("active");

  /* Es mejor mostrar al final, cuando el DOM haya sido modificado */
  $(".select-plato--gen").show();
});
*,*::before,*::after {  box-sizing: border-box;}
body{font-family: Arial, Helvetica, sans-serif;}


.list_items > div { position: relative; cursor:pointer;  width:100%;}

.list_items div:hover label{
  background:#f1f1f1;
  cursor: pointer;
}

.list_items input {
  opacity: 0;
 height:40px;margin:0;
 width:100%;cursor: pointer;
}
.list_items label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  background: #fff;
  pointer-events: none;height:40px;
    padding:0 10px; border-bottom:1px solid #e8e8e8;
    display:flex;align-items: center;font-size:15px;
}

.r_i{
    border-radius: 50%;
    min-width: 17px;margin-right:7px;
    min-height: 17px;
    background: #fff;
    border: 2px solid #7c7575;transition: all .8s;
}

.list_items div:last-child label {
  border-right: 0;
}
.list_items input:checked + label {
  background: #e6eeff;color:blue;

}
.list_items input:checked + label > .r_i{
  background: blue;
    border-color: white;
    box-shadow: 0 0 0 2px #0000ff;transform: scale(0.9);
}

.select-plato--cont:not(.active) .list_items{display:none;}

.select-plato--gen .body-global{display:flex;justify-content: center;align-items: center;width:100%;height:100%;}
.select-plato--gen .body-global .body{width:400px;box-shadow: 0 0 8px rgba(0,0,0,.3);max-height:calc(100vh - 50px);overflow-x: hidden;
    overflow-y: auto;
    border-radius: 4px;
    }


.select-plato--gen{
    box-shadow: 0 0 8px rgba(105,105,105,0.2), 0 0 1px 1px rgba(208,208,208,0.5);
    background: rgba(0,0,0,.3);
    border-radius: 2px;
    display:none;
    position:fixed;
    width:100vw;height:100vh;top:0;left:0;
}


.select-plato--gen .select-plato--cont:last-child .titulo{
  border-bottom: 0;
}

.titulo{
  background:#fff;
  padding:10px 4px;font-weight:bold;
  border-bottom:2px solid #e8e8e8;
  display:flex;align-items: center;
}

.titulo > img{
  margin-right:5px;width:9px;
}



.titulo:hover{
  background:blue;
  color:#fff;
  cursor:pointer;
}

.select-plato--cont.active .titulo img,.titulo:hover img{
  filter:invert(1);
}
.select-plato--cont.active .titulo{
    background:blue;
  color:#fff;
  cursor:pointer;
  border-bottom-color:blue;

}


.select--button{
        background-color: #fff;
    border: 1px solid #bbbbbb;
    border-radius: 3px;
    color: #4a4a4a;
    display:flex;
    justify-content: space-between;height: 41px;
    align-items: center;padding:0 5px;cursor: pointer;
}
.select--button .icono{
  opacity: .4;font-size:13px;
}


.select--button:hover .icono{
  opacity: 1;
}
.select--button:hover{
 border-color: #0037d6;
    box-shadow: inset 0 0 0 1px #0037d6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="select--button" data-id-plato="1">
  Parrilla 1 <div class="icono">&#9660;</div>
</div><br>
<div class="select--button" data-id-plato="2">
  Parrilla 2 <div class="icono">&#9660;</div>
</div>

<div style="width:500px" class="">
  <div class="select-plato--gen select--modal">
    <div class="body-global">
      <div class="body">
        <group id="valor_defecto_select-plato" class="list_items" style="border-radius: 3px;">
          <div><input type="radio" name="plato" value="0"  style="height:50px;"><label><div class="r_i"></div>Seleccionar Plato</label></div>
        </group>
        <div class="select-plato--cont">
          <div class="titulo"><img src="images/iconos/flecha.svg"> Parrillas</div>
          <group class="list_items">
            <div><input type="radio" name="plato" value="1"><label><div class="r_i"></div>Parrilla 1</label></div>
            <div><input type="radio" name="plato" value="2"><label><div class="r_i"></div>Parrilla 2</label></div>
            <div><input type="radio" name="plato" value="3"><label><div class="r_i"></div>Parrilla 3</label></div>
            <div><input type="radio" name="plato" value="4"><label><div class="r_i"></div>Parrilla 4</label></div>
            <div><input type="radio" name="plato" value="5"><label><div class="r_i"></div>Parrilla 5</label></div>
          </group>
        </div>
        <div class="select-plato--cont">
          <div class="titulo"><img src="images/iconos/flecha.svg"> Vinos</div>
          <group class="list_items"> 
            <div><input type="radio" name="plato" value="6"><label><div class="r_i"></div>Vino 1</label></div>
            <div><input type="radio" name="plato" value="7"><label><div class="r_i"></div>Vino 2</label></div>
            <div><input type="radio" name="plato" value="8"><label><div class="r_i"></div>Vino 3</label></div>
            <div><input type="radio" name="plato" value="9"><label><div class="r_i"></div>Vino 4</label></div>
          </group> 
        </div>
        <div class="select-plato--cont">
          <div class="titulo"><img src="images/iconos/flecha.svg"> Bebidas</div>
          <group class="list_items"> 
            <div><input type="radio" name="plato" value="10" ><label><div class="r_i"></div>Gaseosa 1</label></div>
            <div><input type="radio" name="plato" value="11" ><label><div class="r_i"></div>Gaseosa 2</label></div>
            <div><input type="radio" name="plato" value="12" ><label><div class="r_i"></div>Gaseosa 3</label></div>
            <div><input type="radio" name="plato" value="13" ><label><div class="r_i"></div>Gaseosa 4</label></div>
          </group> 
        </div>
        <div class="select-plato--cont">
          <div class="titulo"><img src="images/iconos/flecha.svg"> Bebidas</div>
          <group class="list_items"> 
            <div><input type="radio" name="plato" value="14" ><label>Gaseosa 1</label></div>
            <div><input type="radio" name="plato" value="15" ><label>Gaseosa 2</label></div>
            <div><input type="radio" name="plato" value="16" ><label>Gaseosa 3</label></div>
            <div><input type="radio" name="plato" value="17" ><label>Gaseosa 4</label></div>
          </group>
        </div>
        <div style="padding:5px;background:#fff;display:flex;justify-content: flex-end;">
          <div id="action_cancelar_select-plato" style="background-color: red;padding:8px;border-radius:3px;color:#fff;cursor: pointer;">Cancelar</div>
        </div>
      </div>
    </div>
  </div>
</div>

<div style="margin-top:50px"><button id="cual">¿Cuál?</button></div>

4
  • 1
    gracias, no funcionaba cuando seleccionabas un value = 0; Lo solucione con un if: if(id_actual =="0"){ $('.list_items input[type="radio"][value="0"]').prop("checked",true); }else{ $('.select-plato--cont input[value="' + id_actual + '"]') .prop("checked", true) .parents(".list_items") .show() .parents(".select-plato--cont") .addClass("active"); }
    – IntruzO
    Commented el 14 ene. 2021 a las 17:07
  • Gracias. También se soluciona seleccionando por defecto es opción tras la limpieza para que después activar checked en otro elemento haga su trabajo si es necesario. Commented el 14 ene. 2021 a las 17:26
  • Editaré mi respuesta con esa mejora en cuanto vuelva a casa. Commented el 14 ene. 2021 a las 17:26
  • 1
    Ya está editada mi respuesta. Tu solución es más elegante, te propongo otra diferente para que conozcas la posibilidad :) Commented el 14 ene. 2021 a las 21:16

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.