0

estoy tratando de mostrar 2 div que se encuentran oculto. La idea es que cuando presione una de las opciones del select, se muestre su respectivo div. En este momento el código que tiene que ver con el select, no está funcionando. Yo no tengo ni la menor idea de cómo se podrá hacer ésto. Lo que tengo implementado es sin saber si es la manera correcta de hacerlo. Espero que puedan ayudarme.

Este es el select que debe lanzar los div ocultos.
... 
     <div class="form-group" id="ajuste">
            <label for="nivel" >Categoria</label>
            <select name="categoria" class="form-control" id="categoria">
                <option value="0">-- Seleccione --</option>
                <option value="1">Estudiante</option>
                <option value="1">Trabajador</option>
            </select> 
             <div class="ayuda">
                <p> Si selecciona Estudiante, debera mosrar los grupos, en caso contrario los dpto.</p>
            </div>          
        </div>
...

Estos son los div ocultos.

...
        <div class="form-group oculto" id="grupoContenedor">
            <label for="grupo" >Grupo</label>
            <select name="grupo" class="form-control" id="grupo">
                <option value="0">-- Seleccione --</option>
                <option value="1">1301</option>   
                <option value="2">1302</option>
                <option value="3">1303</option>   
                <option value="4">1304</option>
                <option value="5">1305</option>   
                <option value="6">CPE</option>
            </select>  
            <div class="ayuda">
                <p> Solo se muestra si se selecciona estudiante.</p>
            </div>          
        </div>
        <div class="form-group oculto" id="dptoContenedor">
            <label for="dpto" >Dpto.</label>
            <select name="dpto" class="form-control">
                <option value="0">-- Seleccione --</option>
                <option value="1">Programación</option>   
                <option value="2">Humanidades</option>
                <option value="3">Ciencias Básicas</option>   
            </select>    
            <div class="ayuda">
                <p> Solo se muestra si se selecciona trabajador.</p>
            </div>              
        </div>
...

Código en jQuery:

...
    $("#categoria").click(function(){

        if ($("#categoria").val() == 1) {
            $("#grupoContenedor").show(500);
        }

        if ($("#categoria").val() == 2) {
            $("#dptoContenedor").show(500);
        }

        /*var categoria = $("#categoria").val();
        switch(categoria){
            case 1: $("#grupoContenedor").show(500);
                    break;
            case 2: $("#dptoContenedor").show(500); 
                    break;
            default:$("#grupoContenedor").hide(500);
                    $("#dptoContenedor").hide(500); 
                    break;  
        }*/

    })

2 respuestas 2

0

en jquery existe una función que escucha cuando un elemento en especifico del DOM cambia de valor. Te dejo un enlace para que lo revises:https://www.anerbarrena.com/jquery-change-1879/

Aquí la solución:

//Escuchas cuando este elemento cambia de valor
$("#categoria").change(function(){
    //Obtiener el valor seleccionado
    var catSeleccionado = $("#categoria").val();
    if(catSeleccionado == 1){
        $("#grupoContenedor").show();
    }
    //OTRAS CONDICIONES
    //...
});

1
  • Muchas gracias. No tenía idea que existiera ese método. Yo m estaba volviendo loco pq no sabía cómo implementar eso. Gracias a ambos x echarme una mano.
    – CasinerO
    Commented el 27 may. 2020 a las 14:35
0

Hay un par de cosas por las que no te sale:

  1. Un despiste en el valor del tercer option en el select original. Ambos values tienen el mismo valor (1).
  2. Has utilizado el evento o método click para activar el evento sobre tu select original; sin embargo el método click no es el que te interesa, ya que se va a activar cuando el usuario haga click con el ratón sobre tu select. Es decir, el evento se activará en cuanto se despliega el select con los valores (momento en el que el usuario aún no habrá escogido ninguna opción porque acaba de desplegar/abrir el select).

Lo que debes utilizar en este caso es el evento change. Este evento se activará cuando el usuario cambie el valor del select: es decir, cuando haga click sobre el option adecuado.

$("#categoria").change(function(){

    //$('.oculto').hide();

    if ($("#categoria").val() == 1) {
        $("#grupoContenedor").show(500);
    }

    if ($("#categoria").val() == 2) {
        $("#dptoContenedor").show(500);
    }
});
.oculto {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="ajuste">
    <label for="nivel" >Categoria</label>
    <select name="categoria" class="form-control" id="categoria">
        <option value="0">-- Seleccione --</option>
        <option value="1">Estudiante</option>
        <option value="2">Trabajador</option>
    </select> 
     <div class="ayuda">
        <p> Si selecciona Estudiante, debera mosrar los grupos, en caso contrario los dpto.</p>
    </div>          
</div>

        <div class="form-group oculto" id="grupoContenedor">
            <label for="grupo" >Grupo</label>
            <select name="grupo" class="form-control" id="grupo">
                <option value="0">-- Seleccione --</option>
                <option value="1">1301</option>   
                <option value="2">1302</option>
                <option value="3">1303</option>   
                <option value="4">1304</option>
                <option value="5">1305</option>   
                <option value="6">CPE</option>
            </select>  
            <div class="ayuda">
                <p> Solo se muestra si se selecciona estudiante.</p>
            </div>          
        </div>
        <div class="form-group oculto" id="dptoContenedor">
            <label for="dpto" >Dpto.</label>
            <select name="dpto" class="form-control">
                <option value="0">-- Seleccione --</option>
                <option value="1">Programación</option>   
                <option value="2">Humanidades</option>
                <option value="3">Ciencias Básicas</option>   
            </select>    
            <div class="ayuda">
                <p> Solo se muestra si se selecciona trabajador.</p>
            </div>              
        </div>

Nota:

Aunque no lo comentas en tu pregunta, imagino que si el usuario elige un option pero luego cambia de idea y elige otro, querrás que se oculte el select de su primera elección y que aparezca el de su segunda elección. En ese caso, debes hacer que nada más se active el evento, se oculten todos los selects (salvo el original) y luego se muestre el de la última elección.

Esto lo harás con la línea que he comentado:

$('.oculto').hide();

Sólo tienes que descomentarla.

3
  • Revise el HTML y no sé cómo deje pasar algo como eso 🤦🏽‍♂️. Hice los cambios k m dijiste y funciona al 💯. Gracias
    – CasinerO
    Commented el 27 may. 2020 a las 14:33
  • M podrías explicar cómo funciona esta línea. $('.oculto').hide()
    – CasinerO
    Commented el 27 may. 2020 a las 17:00
  • @CasinerO, claro. Lo que hace el método hide es simplemente ocultar (cambiar la propiedad display de css a none) a todos los elementos HTML a los que haga referencia el selector (el selector es lo que pones delante; en este caso: todos los elementos con clase oculto). Así pués, lo que haces en tu código es: primero esconde todos los elementos con la clase oculto, y ahora muestra sólo el que corresponda. Espero que se haya entendido bien.
    – cooper
    Commented el 27 may. 2020 a las 17:40

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.