Lista desplegable dinámica dependiente usando MySQL, PHP y AJAX
En primer lugar podéis ver en el siguiente enlace la DEMO de nuestro ejemplo:
VER DEMO
Desde el siguiente enlace podéis descargar los ficheros:
Descargar Ficheros
Nuestro ejemplo va a tener dos listas:
- La primera lista tendrá como contenido Países.
- La segunda lista será dependiente de la primera lista (lista de países), por lo tanto cuando se seleccione por ejemplo de la primera lista la opción España en la segunda lista visualizaremos algunas ciudades pertenecientes a España como (Valencia, Madrid, Barcelona…).
Antes de nada deberemos tener disponible una base de datos con dos tablas:
- Tabla de países:
Campos: id, descripcion
- Tabla de ciudades:
Campos: id, descripcion, id_pais
Scripts de creación de tablas e inserción de datos:
--generación tabla paises CREATE TABLE paises ( id INT NOT NULL AUTO_INCREMENT, descripcion VARCHAR(255) NOT NULL, PRIMARY KEY (id) ); --inserción datos tabla paises INSERT INTO paises(descripcion) VALUES ('España'); INSERT INTO paises(descripcion) VALUES ('Francia'); INSERT INTO paises(descripcion) VALUES ('Portugal'); --generación tabla ciudades CREATE TABLE ciudades ( id INT NOT NULL AUTO_INCREMENT, descripcion VARCHAR(255) NOT NULL, id_pais INT NOT NULL, PRIMARY KEY (id) ); --inserción datos tabla ciudades INSERT INTO ciudades(descripcion, id_pais) VALUES ('Valencia', 1); INSERT INTO ciudades(descripcion, id_pais) VALUES ('Madrid', 1); INSERT INTO ciudades(descripcion, id_pais) VALUES ('Barcelona', 1); INSERT INTO ciudades(descripcion, id_pais) VALUES ('Sevilla', 1); INSERT INTO ciudades(descripcion, id_pais) VALUES ('Lyon', 2); INSERT INTO ciudades(descripcion, id_pais) VALUES ('Nantes', 2); INSERT INTO ciudades(descripcion, id_pais) VALUES ('Burdeos', 2); INSERT INTO ciudades(descripcion, id_pais) VALUES ('Toulouse', 2); INSERT INTO ciudades(descripcion, id_pais) VALUES ('Oporto', 3); INSERT INTO ciudades(descripcion, id_pais) VALUES ('Lisboa', 3); INSERT INTO ciudades(descripcion, id_pais) VALUES ('Sintra', 3); INSERT INTO ciudades(descripcion, id_pais) VALUES ('Estoril', 3); |
Vamos a usar para el desarrollo de nuestras listas tres archivos.
Archivo 1 (index.php):
Este es el principal y es donde se van a visualizar las dos listas, por ello lo llamaremos index.php
<!DOCTYPE html> <html lang="es"> <?php include 'config.php'; ?> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> </head> <body> <!-- Este script se lanza cada vez que se selecciona una opción en la lista de países y se encarga de enviar el id del país al archivo get_ciudad.php (Archivo 3), este archivo que lo veremos después se encargará de generar una nueva lista de ciudades dependiendo del id seleccionado de país, una vez creada la lista se sustituirá sobre la lista actual de nuestro archivo index --> <script> function obtenerCiudades(val) { $.ajax ({ type: "POST", url: "get_ciudad.php", data:'id_pais='+val, success: function(data) { $("#lista_ciudades").html(data); }); } </script> <?php $consulta_paises = $link->query("select id as 'valor', descripcion as 'descripcion' from paises order by descripcion"); $consulta_ciudades = $link->query("select id as 'valor', descripcion as 'descripcion' from ciudades order by descripcion"); ?> <div class="form-group col-md-3"> <label>Paises:</label> <select name="pais" class="form-control" id="lista_paises" onChange="obtenerCiudades(this.value);"> <option value=''>Seleccionar País</option> <?php while($row= $consulta_paises->fetch_object()) { echo "<option value='".$row->valor."'>".$row->descripcion."</option>"; } ?> </select> </div> <div class="form-group col-md-6"> <label>Ciudades:</label> <select name="ciudad" id="lista_ciudades" class="form-control"> <option value=''>Seleccionar Ciudad</option> <?php while($row= $consulta_ciudades->fetch_object()) { echo "<option value='".$row->valor."'>".$row->descripcion."</option>"; } </select> </div> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> </body> </html> |
Archivo 2 (config.php):
Creamos nuestra conexión a la base de datos.
<?php // Información sobre la base de datos $var_servidor_bd="xxxxxx"; // Servidor de la base de datos, casi siempre localhost $var_nombre_bd="xxxxxx"; // Nombre de la base de datos $var_usuario_bd="xxxxxx"; // Usuario de la base de datos $var_password_bd="xxxxxx"; // Contraseña de la base de datos $link = mysqli_connect($var_servidor_bd, $var_usuario_bd, $var_password_bd, $var_nombre_bd); if (mysqli_connect_errno()) { printf("Falló la conexión: %s\n", mysqli_connect_error()); exit(); } $link->query("SET NAMES 'utf8'"); //Fin información sobre la base de datos ?> |
Archivo 3 (get_ciudad.php):
En este archivo generamos la lista nueva dependiente que sustituirá a la lista del archivo index
<?php include 'config.php'; //pasamos id del país if(!empty($_POST["id_pais"])) { $sql ="SELECT id, descripcion FROM ciudades WHERE id_pais = '" . $_POST["id_pais"] . "'"; $consulta_ciudades = $link->query($sql); //construimos lista nueva dependiente ?> <option value="">Seleccionar Ciudad</option> <?php while($ciudad= $consulta_ciudades->fetch_object()) { ?> <option value="<?php echo $ciudad->id; ?>"><?php echo $ciudad->descripcion; ?></option> <?php } } ?> |
Hola, en el artículo divido el código en tres partes “Archivo 1 (index.php)”, “Archivo 2 (config.php)” y Archivo 3 (get_ciudad.php), de todas maneras voy a trabajar más en este artículo para conseguir dejar más claro al lector el proceso de desarrollo. Muchas gracias por tu opinión.
Enhorabuena por el ejemplo. ¿Cómo se haría para que, en vez de tomar como valor los id de pais e id de ciudad, tomara los nombres del pais y de la ciudad?
¡Gracias!
Muchas gracias Este ejemplo me a servido bastanate para entender un poco mas de ajax saludos y gracias
Muchas gracias, después de buscar por mas de una semana, alguien que realmente sabe explicar el proceso, te agradezco mucho
Normalmente nunca comento en ninguna parte, pero éste artículo me ayudó con mi tesis, muy bien explicado, directo al punto y el código bastante directo y funcional.
Muchísimas gracias!