0

quisiera me puedan ayudar con esta duda y como solucionarla. Tengo 2 div, el segundo div viene oculto dependiendo de lo que seleccione en el primer div, hasta ahí todo bien, porque puedo ocultar o mostrar los div.

<div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for=""> Tiene Seguro</label>
                                    <select name="seguro" id="seguro">
                                        <option value="1" @if($user->seguro==1) selected @endif>SI</option>
                                        <option value="2" @if($user->seguro==2) selected @endif>NO</option>
                                    </select>
                                 </div>
                            </div>
                        </div>

<div class="row" id="tipoSeguro" style="display:none">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <div class="form-check">
                                        <label class="form-check-label"><input  class="form-check-input" name="tipo" type="radio" value="1" @if($user->tipo_seguro==1) checked @endif>Médico - Dental</label>
                                    </div>
                                    <div class="form-check">
                                        <label class="form-check-label"><input class="form-check-input" name="tipo" type="radio" value="2" @if($user->tipo_seguro==2) checked @endif>Otros</label>
                                    </div>
                                </div>
                            </div>
                        </div>

<script>
    $(document).ready(function (){
        $('#seguro').append(function (){

            if($(this).val()==1){
                $('#tipoSeguro').show();
            }else if($(this).val()==2){
                $('#tipoSeguro').hide();
            }else if($(this).val()==""){
                $('#tipoSeguro').hide();
            }

        });
     });
</script>

Mi problema viene cuando quiero editar el formulario y el div que debe mostrarse se muestra o se oculta, pero si cambio la opción del select seguro por SI, debería desplegarse el div oculto, antes lo tenía con un click(function()), pero no me hacia nada si el select seguro era SI, no se mostraba, lo cambie por el append, pero ahora no cambia si seleccionó Si o NO.

Ayuda, gracias

2 respuestas 2

0

Lo que yo haria es cambiar la forma en que ocultas el div, y cuando preguntes para mostrar o ocultar utiliza el fadeIn (mostrar) y fadeOut (ocultar)

<div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label for=""> Tiene Seguro</label>
                                <select name="seguro" id="seguro">
                                    <option value="1" @if($user->seguro==1) selected @endif>SI</option>
                                    <option value="2" @if($user->seguro==2) selected @endif>NO</option>
                                </select>
                             </div>
                        </div>
                    </div>

<div class="row" id="tipoSeguro" @php echo ($user->seguro==2)?'style="display:none"':''; @endphp>
                        <div class="col-sm-12">
                            <div class="form-group">
                                <div class="form-check">
                                    <label class="form-check-label"><input  class="form-check-input" name="tipo" type="radio" value="1" @if($user->tipo_seguro==1) checked @endif>Médico - Dental</label>
                                </div>
                                <div class="form-check">
                                    <label class="form-check-label"><input class="form-check-input" name="tipo" type="radio" value="2" @if($user->tipo_seguro==2) checked @endif>Otros</label>
                                </div>
                            </div>
                        </div>
                    </div>


<script>
$(document).ready(function (){
    $('#seguro').change(function (){

        if($(this).val()==1){
            $('#tipoSeguro').fadeIn();
        }else if($(this).val()==2){
            $('#tipoSeguro').fadeOut();
        }else if($(this).val()==""){
            $('#tipoSeguro').fadeOut();
        }

    });
 });

Espero que te ayude mi respuesta

1
  • Gracias Karli, me funciono super bien Commented el 25 jun. 2018 a las 18:38
0

Prueba a utilizar "change" en vez de "append". Ya que el método "change" detecta el cambio de valor del elemento que selecciones, y este puede interactuar con cualquier elemento que contenga un valor y que este valor pueda verse alterado en cualquier momento. Entonces quedadaria así tu codigo:

<div class="row" id="tipoSeguro">
        <div class="col-sm-12">
            <div class="form-group">
                <div class="form-check">
                    <label class="form-check-label"><input  class="form-check-input" name="tipo" type="radio" value="1" @if($user->tipo_seguro==1) checked @endif>Médico - Dental</label>
                </div>
                <div class="form-check">
                    <label class="form-check-label"><input class="form-check-input" name="tipo" type="radio" value="2" @if($user->tipo_seguro==2) checked @endif>Otros</label>
                </div>
            </div>
        </div>
    </div>

 <select name="seguro" id="seguro">
    <option selected>---</option>
    <option value="1">SI</option>
    <option value="2">NO</option>
 </select>


<script>
    $(document).ready(function (){
        $('#tipoSeguro').hide(); //Ocultas el div

        $('#seguro').on("change", function (){

          var otr= event.target.value; //otr tomara el value que tenga cada etiqueta <option>

            if(otr==1){
                $('#tipoSeguro').show();
            }else if(otr==2){
                $('#tipoSeguro').hide();
            }
        });
     });
</script>

El problema que venias teniendo y que el cual no me había percatado era que tenias un style="display:none" en el div con el id="tipoSeguro", por lo tanto sin importar lo que se hicieses en el script siempre iba a tener un display oculto. Espero ahora si te sirva, avisame cualquier cosa ;)

9
  • Gracias amigo por responder, he cambiado a la opcion change, pero si mi select seguro es SI, no me muestra el div oculto :'( Commented el 25 jun. 2018 a las 14:41
  • Edite mi respuesta de acuerdo a tu comentario de que: no se muestra el div oculto, espero que con los cambios que hice te funcione, cualquier cosa me avisas ;)
    – Juan Osio
    Commented el 25 jun. 2018 a las 15:12
  • Agradezco tu ayuda, pero lamentablemente sigue persistiendo le problema de que si la opcion es SI, el div oculto no lo detecta y no aparece Commented el 25 jun. 2018 a las 15:27
  • Ya era cuestión de honor jajaja, no me había percatado del "display=none" que le habías dado al div. edite la respuesta con la solución, espero te sirva
    – Juan Osio
    Commented el 25 jun. 2018 a las 15:47
  • Aún sigue de la misma manera, cambie por lo que me dices y sigue sin mostrarse el div oculto Commented el 25 jun. 2018 a las 16:08

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.