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">▼</div></div><br>
<div class="select--button" data-id-plato="2"> Parrilla 2 <div class="icono">▼</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.