Formación Web Online

Aprende y mejora tus habilidades dentro del entorno Web.

AJAX jQuery PHP Principal 

Lista desplegable dinámica dependiente usando MySQL, PHP y AJAX

Iván Martínez 4 comentarios

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
      }
    }
?>

Iván Martínez

Ingeniero Informático apasionado por el mundo del desarrollo WEB. Me gusta caminar por este mundo lleno de tecnologías y día a día aprender cosas nuevas como el doctor Frankenstein ¡dadme cosas para experimentar!

También te puede gustar

script en jquery para seleccionar imagenes

Seleccionar imagenes con jQuery

Iván Martínez 4

Como crear tablas dinámicas con MySQL, PHP y estilos Bootstrap

Iván Martínez 1
chartline

Como crear gráficos con MYSQL, AJAX y Google Chart

Iván Martínez 5

4 comentarios sobre “Lista desplegable dinámica dependiente usando MySQL, PHP y AJAX”

  • Iván MartínezAutor
    el Oct 7, 2017 a las 12:46 am
    Permalink

    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.

    Respuesta
  • Ullysses
    el Feb 1, 2018 a las 10:42 pm
    Permalink

    Muchas gracias Este ejemplo me a servido bastanate para entender un poco mas de ajax saludos y gracias

    Respuesta
  • Cristian
    el May 24, 2018 a las 12:26 am
    Permalink

    Muchas gracias, después de buscar por mas de una semana, alguien que realmente sabe explicar el proceso, te agradezco mucho

    Respuesta
  • Fernando
    el Jul 18, 2018 a las 7:33 pm
    Permalink

    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!

    Respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada.