7. Combobox (Select) dinámicos
Requisitos:
En este tutorial aprenderás a crear Combobox (select) anidados dependientes, al seleccionar un combobox el siguiente se cargara con información filtrada de la selecciona anterior.
Para este ejemplo utilizaremos la Base de Datos de RENAPO (Registro Nacional de Población) con los Estados, municipios y localidades de México.
Estructura de carpetas:
En la carpeta del sistema creamos un script con el nombre de conexion.php con el cual creamos la conexión a MySQL:
|
1 2 3 4 5 6 7 8 9 |
<?php //servidor, usuario de base de datos, contraseña del usuario, nombre de base de datos $mysqli = new mysqli("localhost","root","password","mexico"); if(mysqli_connect_errno()){ echo 'Conexion Fallida : ', mysqli_connect_error(); exit(); } ?> |
Ahora creamos el index.php el cual es la pantalla principal donde mostrar las select anidados:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<?php require ('conexion.php'); $query = "SELECT id_estado, estado FROM t_estado ORDER BY estado"; $resultado=$mysqli->query($query); ?> <html> <head> <title>ComboBox Ajax, PHP y MySQL</title> <script language="javascript" src="js/jquery-3.1.1.min.js"></script> <script language="javascript"> $(document).ready(function(){ $("#cbx_estado").change(function () { $('#cbx_localidad').find('option').remove().end().append('<option value="whatever"></option>').val('whatever'); $("#cbx_estado option:selected").each(function () { id_estado = $(this).val(); $.post("includes/getMunicipio.php", { id_estado: id_estado }, function(data){ $("#cbx_municipio").html(data); }); }); }) }); $(document).ready(function(){ $("#cbx_municipio").change(function () { $("#cbx_municipio option:selected").each(function () { id_municipio = $(this).val(); $.post("includes/getLocalidad.php", { id_municipio: id_municipio }, function(data){ $("#cbx_localidad").html(data); }); }); }) }); </script> </head> <body> <form id="combo" name="combo" action="guarda.php" method="POST"> <div>Selecciona Estado : <select name="cbx_estado" id="cbx_estado"> <option value="0">Seleccionar Estado</option> <?php while($row = $resultado->fetch_assoc()) { ?> <option value="<?php echo $row['id_estado']; ?>"><?php echo $row['estado']; ?></option> <?php } ?> </select></div> <br /> <div>Selecciona Municipio : <select name="cbx_municipio" id="cbx_municipio"></select></div> <br /> <div>Selecciona Localidad : <select name="cbx_localidad" id="cbx_localidad"></select></div> <br /> <input type="submit" id="enviar" name="enviar" value="Guardar" /> </form> </body> </html> |
Con jQuery detectamos cuando haya cambiado el elemento del combobox de Estado y enviamos el id del elemento al archivo getMunicipio.php para que este realice la consulta de los municipios dependiendo del Estado y los cargue al combobox de municipio cbx_municipio:
getMunicipio.php (Carpeta includes)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php require ('../conexion.php'); $id_estado = $_POST['id_estado']; $queryM = "SELECT id_municipio, municipio FROM t_municipio WHERE id_estado = '$id_estado' ORDER BY municipio"; $resultadoM = $mysqli->query($queryM); $html= "<option value='0'>Seleccionar Municipio</option>"; while($rowM = $resultadoM->fetch_assoc()) { $html.= "<option value='".$rowM['id_municipio']."'>".$rowM['municipio']."</option>"; } echo $html; ?> |
También jQuery detectamos el cambio al combobox de Municipio para cargar las localidades:
getLocalidades.php (Carpeta includes)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php require ('../conexion.php'); $id_municipio = $_POST['id_municipio']; $query = "SELECT id_localidad, localidad FROM t_localidad WHERE id_municipio = '$id_municipio' ORDER BY localidad"; $resultado=$mysqli->query($query); while($row = $resultado->fetch_assoc()) { $html.= "<option value='".$row['id_localidad']."'>".$row['localidad']."</option>"; } echo $html; ?> |
El resultado es el siguiente:
Para guarda recomendamos que solo se guarde el ID de la localidad seleccionada ya que las tablas están relacionada y teniendo el id de la localidad podemos saber a que Municipio y Estado pertenece.
guarda.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php require ('conexion.php'); $id_localidad = $_POST['cbx_localidad']; $sql = "INSERT INTO datos (id_localidad) VALUES('$id_localidad')"; $resultado = $mysqli->query($sql); if($resultado){ echo "Registro Guardado"; } else { echo "Error al Registrar"; } ?> |
Después de tener el registro guardado en la base de datos posiblemente queremos modificarlo para eso recibimos el id de la localidad y consultamos en la base de datos a que Municipio y Estado pertenece, para que nos los muestre seleccionados en cada Combobox:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<?php require ('conexion.php'); //Aqui recibimos el id de la localidad, colocamos 1000 como ejemplo $localidad = 1000; $query = "SELECT l.id_municipio, m.id_estado FROM t_localidad AS l INNER JOIN t_municipio AS m ON l.id_municipio=m.id_municipio WHERE id_localidad = '$localidad'"; $resultado = $mysqli->query($query); $row = $resultado->fetch_array(MYSQL_ASSOC); $estado = $row['id_estado']; $municipio = $row['id_municipio']; $queryE = "SELECT id_estado, estado FROM t_estado ORDER BY estado"; $resultadoE = $mysqli->query($queryE); $queryM = "SELECT id_municipio, municipio FROM t_municipio WHERE id_estado = '$estado' ORDER BY municipio"; $resultadoM = $mysqli->query($queryM); $queryL = "SELECT id_localidad, localidad FROM t_localidad WHERE id_municipio = '$municipio' ORDER BY localidad"; $resultadoL = $mysqli->query($queryL); ?> <html> <head> <title>ComboBox Ajax, PHP y MySQL</title> <script language="javascript" src="js/jquery-3.1.1.min.js"></script> <script language="javascript"> $(document).ready(function(){ $("#cbx_estado").change(function () { $('#cbx_localidad').find('option').remove().end().append('<option value="whatever"></option>').val('whatever'); $("#cbx_estado option:selected").each(function () { id_estado = $(this).val(); $.post("includes/getMunicipio.php", { id_estado: id_estado }, function(data){ $("#cbx_municipio").html(data); }); }); }) }); $(document).ready(function(){ $("#cbx_municipio").change(function () { $("#cbx_municipio option:selected").each(function () { id_municipio = $(this).val(); $.post("includes/getLocalidad.php", { id_municipio: id_municipio }, function(data){ $("#cbx_localidad").html(data); }); }); }) }); </script> </head> <body> <form id="combo" name="combo" action="guarda.php" method="POST"> <div>Selecciona Estado : <select name="cbx_estado" id="cbx_estado"> <option value="0">Seleccionar Estado</option> <?php while($rowE = $resultadoE->fetch_assoc()) { ?> <option value="<?php echo $rowE['id_estado']; ?>" <?php if($rowE['id_estado']==$estado) { echo 'selected'; } ?>><?php echo $rowE['estado']; ?></option> <?php } ?> </select></div> <br /> <div>Selecciona Municipio : <select name="cbx_municipio" id="cbx_municipio"> <?php while($rowM = $resultadoM->fetch_assoc()) { ?> <option value="<?php echo $rowM['id_municipio']; ?>" <?php if($rowM['id_municipio']==$municipio) { echo 'selected'; } ?>><?php echo $rowM['municipio']; ?></option> <?php } ?> </select></div> <br /> <div>Selecciona Localidad : <select name="cbx_localidad" id="cbx_localidad"> <?php while($rowL = $resultadoL->fetch_assoc()) { ?> <option value="<?php echo $rowL['id_localidad']; ?>" <?php if($rowL['id_localidad']==$localidad) { echo 'selected'; } ?>><?php echo $rowL['localidad']; ?></option> <?php } ?> </select></div> <br /> <input type="submit" id="enviar" name="enviar" value="Guardar" /> </form> </body> </html> |
Y para hacer la modificación es similar que el guardado pero en vez de INSERT utilizamos la sentencia UPDATE.