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;
}*/
})