Buenas tardes necesito hacer en una plantilla html tres listas desplegables(select) donde dos de ellas dependen de la primera seleccion que se escoja.
2 respuestas
La solucion que encontre es muy sencilla desde el onChange pude invocar las dos funciones javascript(separandolas por punto y coma).
Yo actualmente estoy utilizando PHP, HTML y jQuery. Te voy a explicar (Dentro de los comentarios del código) de la manera más fácil que pueda para que lo logres comprender.
En mi caso, tengo 2 select uno que llamaremos Institución y otro que llamaremos area: Uno que contiene el nombre de las instituciones, y que cuando seleccione la institución, el siguiente select nos mostrará las areas/carreras que contiene la institución.
<?php
//Hago la consulta a la base de datos de instituciones
$query = 'SELECT * from instituciones';
$result = $connection->query($query);
?>
<select class="form-control" name="institucion" id="institucion" required>
<option>Selecciona una institución</option>
<?php
//Despliego todos los registros de mi consulta con el ciclo While
while($row = $result->fetch_array()){
?>
<option value="<?php echo $row['idinstitucion']; ?>">
<?php //Muestro el nombre de la institucion
echo $row['nombre'];
?>
</option>
<?php
}
?>
<div class="form-group">
<label for="area">Area</label>
<select class="form-control" name="area" id="area" required>
<option>Selecciona el area</option>
</select>
</div>
Si te das cuenta, mi primer select contiene un ID llamado institucion y el segundo select contiene un ID llamado area. Y ahora empieza lo bueno con jQuery... Dentro de jQuery ira esto:
$(document).ready(function(){
$("#institucion").change(function(){ //Evento que se activa cuando selecciono el ID de institución
var institucion=$(this).val(); //Obtenemos el valor de institucion
//Envio a una página que hara la consulta SQL y me devolvera los datos
$.get("http://localhost/asignaturas/procesarasignaturas.php?idinstitucion="+institucion,
function(data){
$("#area").html(data); //Le decimos donde queremos mostrar el resultado que se hara en la pagina.
});
});
});
¿Qué hay en procesarasignaturas.php? Bueno, es donde nosotros haremos la consulta para nuestro select llamado #area, el cual se activará cuando nosotros seleccionemos nuestro select llamado #institucion.
<?php
include('connection.php');
//Obtenemos el valor del evento GET que pusimos en JQuery
$idinstitucion = $_GET['idinstitucion'];
//Hacemos nuestra consulta MySQL.
$sqlarea = "SELECT * FROM area WHERE idinstitucion='$idinstitucion'";
$consultatipo = $connection->query($sqlarea);
?>
<option>Selecciona el area</option>
<?php
while($query = $consultatipo->fetch_array()){
?>
<option value="<?php echo $query['idinstitucion']; ?>">
<?php echo $query['area'];?>
</option>
Espero y te sea de ayuda. Por favor, si tienes cualquier duda, si no te quedo claro o algo que pueda hacer, estoy dispuesto a ayudar. Saludos! :D