Cargar combos en cascada con jQuery, PHP y M...

Back End (/blog/1/tag/8/back-end)

MySQL (/blog/1/tag/14/mysql)

http://nebaris.com/post/38/cargar-combos-en-cas...

jQuery (/blog/1/tag/4/jquery)
PHP (/blog/1/tag/17/php)

Cargar combos en cascada con

jQuery, PHP y MySQL
Gabriel Kaplan (/blog/1/autor/5/gabriel-kaplan) 27/08/2013
Like

(http://www.nebaris.com/ejemplos/0029/combos.html)
(http://www.nebaris.com/ejemplos/0029/0029.zip)
Hoy veremos un ejemplo integral. Vamos a tener una pgina que muestre dos combos, uno de
paises y otro de ciudades. Al seleccionar un pas, con jQuery utilizaremos JSON para llamar a una
pgina PHP que buscar en la base de datos las ciudades que corresponden a ese pas, las
devolver y finalmente cargaremos el combo de ciudades.

Datos
La base de datos es simple, en este caso tenemos slo dos tablas, con la siguiente relacin:

1 de 15

26/03/14 20:28

Cargar combos en cascada con jQuery, PHP y M...

http://nebaris.com/post/38/cargar-combos-en-cas...

Vamos a generar las tablas necesarias para el ejemplo.

2 de 15

26/03/14 20:28

Cargar combos en cascada con jQuery, PHP y M...

http://nebaris.com/post/38/cargar-combos-en-cas...

--- Estructura tabla `paises`

-CREATE TABLE IF NOT EXISTS `paises` (
`idpais` int(11) NOT NULL AUTO_INCREMENT,
`nombre` varchar(50) NOT NULL,
PRIMARY KEY (`idpais`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;
--- Datos para la tabla `paises`
-INSERT INTO `paises` (`idpais`, `nombre`) VALUES
(1, 'Argentina'),
(2, 'Espaa'),
(3, 'Mxico'),
(4, 'Colombia');
--- Estructura tabla `ciudades`
-CREATE TABLE IF NOT EXISTS `ciudades` (
`idciudad` int(11) NOT NULL AUTO_INCREMENT,
`nombre` varchar(50) NOT NULL,
`idpais` int(11) NOT NULL,
PRIMARY KEY (`idciudad`),
KEY `idpais` (`idpais`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=13 ;
--- Datos para la tabla `ciudades`
-INSERT INTO `ciudades` (`idciudad`, `nombre`, `idpais`) VALUES
(1, 'Buenos Aires', 1),
(2, 'Rosario', 1),
(3, 'Mendoza', 1),
(4, 'Madrid', 2),
(5, 'Barcelona', 2),
(6, 'Valencia', 2),
(7, 'Puebla', 3),
(8, 'Guadalajara', 3),
(9, 'Monterrey', 3),
(10, 'Barranquilla', 4),

3 de 15

26/03/14 20:28

Cargar combos en cascada con jQuery, PHP y M...

http://nebaris.com/post/38/cargar-combos-en-cas...

(12, 'Cali', 4);

--- Restriccin para la tabla `ciudades`
-ALTER TABLE `ciudades`
ADD CONSTRAINT `paises_ciudades` FOREIGN KEY (`idpais`) REFERENCES `p
aises` (`idpais`);

Conexin con base de datos

Vamos a crear un archivo que nos administre la conexin con la base de datos, de esta forma se
encargar de obtener la conexin, cerrarla cuando ya no sea necesaria y de ejecutar las consultas.
// archivo db.php
<?php
function obtenerConexion() {
$db = new mysqli('host', 'usuario', 'password', 'base de datos'
);
if($db->connect_errno > 0){
die('Unable to connect to database [' . $db->connect_error
. ']');
}
return $db;
}
function cerrarConexion($db, $query) {
$query->free();
$db->close();
}
function ejecutarQuery($db, $sql) {
if(!$resultado = $db->query($sql)){
die('There was an error running the query [' . $db->error .
']');
}
return $resultado;
}
?>

Pases y ciudades
4 de 15

26/03/14 20:28

Cargar combos en cascada con jQuery, PHP y M...

http://nebaris.com/post/38/cargar-combos-en-cas...

Ahora creamos dos archivos, uno para los pases:

// pais.php
<?php
include("db.php");
// esta funcin se va a llamar al cargar el primer combo
function obtenerTodosLosPaises() {
$paises = array();
$sql = "SELECT idpais, nombre
FROM paises";
$db = obtenerConexion();
// obtenemos todos los pases
$result = ejecutarQuery($db, $sql);
// creamos objetos de la clase pas y los agregamos al arreglo
while($row = $result->fetch_assoc()){
$row['nombre'] = mb_convert_encoding($row['nombre'], 'UTF-8
', mysqli_character_set_name($db));
$pais = new pais($row['idpais'], $row['nombre']);
array_push($paises, $pais);
}
cerrarConexion($db, $result);
// devolvemos el arreglo
return $paises;
}
class pais {
public $id;
public $nombre;
function __construct($id, $nombre) {
$this->id = $id;
$this->nombre = $nombre;
}
}
?>

Y uno para las ciudades:

5 de 15

26/03/14 20:28

Cargar combos en cascada con jQuery, PHP y M...

http://nebaris.com/post/38/cargar-combos-en-cas...

// ciudad.php
<?php
include("db.php");
// si se est enviando por POST el id del pas
// significa que intentamos acceder desde jQuery
if(isset($_POST['idPais'])) {
$ciudades = array();
$sql = "SELECT idciudad, nombre
FROM ciudades
WHERE idpais = ".$_POST['idPais'];
$db = obtenerConexion();
// obtenemos todas las ciudades
$result = ejecutarQuery($db, $sql);
// creamos objetos de la clase ciudad y los agregamos al arregl
o
while($row = $result->fetch_assoc()){
$row['nombre'] = mb_convert_encoding($row['nombre'], 'UTF-8
', mysqli_character_set_name($db));
$ciudad = new ciudad($row['idciudad'], $row['nombre']);
array_push($ciudades, $ciudad);
}
cerrarConexion($db, $result);
// devolvemos el arreglo de ciudades, en formato JSON
echo json_encode($ciudades);
}
class ciudad {
public $id;
public $nombre;
function __construct($id, $nombre) {
$this->id = $id;
$this->nombre = $nombre;
}
}
?>

Hay que tener en cuenta, que para evitar complejidad en el ejemplo, no estamos ni utilizando stored
procedures (procedimientos almacenados), ni validando los campos contra XSS.

6 de 15

26/03/14 20:28

Cargar combos en cascada con jQuery, PHP y M...

http://nebaris.com/post/38/cargar-combos-en-cas...

Estructura
En la estructura de nuestro ejemplo, tenemos una llamada para incluir el archivo de pases; con esto
cargamos el primer combo iterando el arreglo de pases. Al segundo combo, slo le agregamos una
opcin que indica que se debe elegir un pas.

7 de 15

26/03/14 20:28

Cargar combos en cascada con jQuery, PHP y M...

http://nebaris.com/post/38/cargar-combos-en-cas...

// combos.php
<?php
include("pais.php");
?>
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Nebaris - Combos en cascada</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jqu
ery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="divContenedor">
<h2>Combos de seleccin anidados</h2>
<div class="divLabels">
<label for="cboPaises">Paises</label>
</div>
<div class="divSelects">
<select id="cboPaises">
<option value="0">Seleccione un pas</option>
<?php
$paises = obtenerTodosLosPaises();
foreach ($paises as $pais) {
echo '<option value="'.$pais->id.'">'.$pais->no
mbre.'</option>';
}
?>
</select>
</div>
<div class="divLabels">
<label for="cboCiudades">Ciudades</label>
</div>
<div class="divSelects">
<select id="cboCiudades">
<option value="0">Seleccione un pas</option>
</select>
</div>
</div>
</body>
</html>

jQuery
8 de 15

26/03/14 20:28

Cargar combos en cascada con jQuery, PHP y M...

http://nebaris.com/post/38/cargar-combos-en-cas...

Mediante jQuery, cada vez que se modifique el valor del combo, debemos obtener el valor de la
opcin seleccionada. Si este valor es mayor a 0, utilizamos la funcin post, para llamar al archivo
PHP y que nos devuelva un arreglo de ciudades.

9 de 15

26/03/14 20:28

Cargar combos en cascada con jQuery, PHP y M...

http://nebaris.com/post/38/cargar-combos-en-cas...

$(document).ready(function(){
// cada vez que se cambia el valor del combo
$("#cboPaises").change(function() {
// obtenemos el valor seleccionado
var pais = $(this).val();
// si es 0, no es un pas
if(pais > 0)
{
//creamos un objeto JSON
var datos = {
idPais : $(this).val()
};
// utilizamos la funcin post, para hacer una llamada AJAX
$.post("ciudad.php", datos, function(ciudades) {
// obtenemos el combo de ciudades
var $comboCiudades = $("#cboCiudades");
// lo vaciamos
$comboCiudades.empty();
// iteramos a travs del arreglo de ciudades
$.each(ciudades, function(index, cuidad) {
// agregamos opciones al combo
$comboCiudades.append("<option>" + cuidad.nombre +
"</option>");
});
}, 'json');
}
else
{
// limpiamos el combo e indicamos que se seleccione un pas
var $comboCiudades = $("#cboCiudades");
$comboCiudades.empty();
$comboCiudades.append("<option>Seleccione un pas</option>"
);
}
});
});

Resumen
10 de 15

26/03/14 20:28

Cargar combos en cascada con jQuery, PHP y M...

http://nebaris.com/post/38/cargar-combos-en-cas...

Este ejemplo simple, nos sirve para poder entender cmo se interrelacionan una base de datos, PHP
y jQuery. Quiero agradecer a Comrlr que indic cambios para evitar problemas si los nombres de las
ciudades y pases tienen acentos o ees. Por otro lado, la versin 1.10.1 de jQuery tiene problemas
con Internet Explorer, por lo que hay que utilizar la versin 1.10.2.
Qu opins de este ejemplo?
Gracias por pasar por Nebaris, cualquier consulta sobre este artculo la pods hacer en los
comentarios o escribiendo a hola@nebaris.com (mailto:hola@nebaris.com).
Like

Autor - Gabriel Kaplan

Programador, msico y fundador de Nebaris.

Vive en Capital Federal - Argentina.
(https://www.facebook.com/gabrielfkaplan)
(https://twitter.com/gabriel_kaplan)
(https://plus.google.com/109747649621400754615)
(http://ar.linkedin.com
/in/gabrielfkaplan)

Artculos relacionados
Mostrar videos de un canal de YouTube en ASP.NET (/post/23/mostrar-videos-de-uncanal-de-youtube-en-aspnet)
Sesiones en PHP (/post/64/sesiones-en-php)
Introduccin a Ruby - parte 3 (/post/92/introduccion-a-ruby--parte-3)
Desarrollo web prctico con ASP.NET MVC, Entity Framework y Bootstrap (/post
/127/desarrollo-web-practico-con-aspnet-mvc-entity-framework-y-bootstrap)
Cmo utilizar C# y Python juntos? (/post/128/como-utilizar-c-sharp-y-python-juntos)

// RECURSOS GRATIS TODAS LAS SEMANAS

11 de 15

26/03/14 20:28

Cargar combos en cascada con jQuery, PHP y M...

http://nebaris.com/post/38/cargar-combos-en-cas...

+1200 personas ya se suscribieron. Suscribite vos tambin al newsletter TOOLBOX y

recib en tu email una recopilacin semanal de las herramientas ms importantes para
diseo y programacin. Todos los mircoles. Fcil de desuscribirse. No spam. Cuidamos
tu direccin de email y no la compartimos. VERIFIC QUE EL FILTRO DE SPAM NO
BLOQUEE NUESTROS EMAILS.
Direccin de email

Nombre

SUSCRIBITE

12 de 15

26/03/14 20:28

Cargar combos en cascada con jQuery, PHP y M...

18 Comentarios

http://nebaris.com/post/38/cargar-combos-en-cas...

Nebaris

Acceder

Compartir Favorito

Ordenar por los ms antigos

nete a la discusin...
Hernan

hace 7 meses

Excelente ejemplo, muy util.

Responder Compartir

Gabriel Kaplan

Moderador

> Hernan hace 7 meses

Muchas gracias por tu comentario Hernn.

Responder Compartir

luis

hace 7 meses

calidad muy bueno

Responder Compartir

Gabriel Kaplan

Moderador

> luis hace 7 meses

Muchas gracias Luis por tu comentario

Responder Compartir

comrlr

hace 7 meses

Hummm. La demo no me funciona en Internet Explorer. Quizs lo correcto sera en el

archivo "pais.php" cambiar las siguientes lneas:
while($row = $result->fetch_assoc()){
$row['nombre'] = mb_convert_encoding($row['nombre'], 'UTF-8',
mysqli_character_set_name($db));
$pais = new pais($row['idpais'], $row['nombre']);
array_push($paises, $pais);
}
y en el archivo "ciudad.php", si las ciudades tuviesen tildes o ees, cambiar las
siguientes lneas:

13 de 15

while($row = $result->fetch_assoc()){
$row['nombre'] = mb_convert_encoding($row['nombre'], 'UTF-8',
mysqli_character_set_name($db));
$ciudad = new ciudad($row['idciudad'], $row['nombre']);
array_push($ciudades, $ciudad);

26/03/14 20:28

Cargar combos en cascada con jQuery, PHP y M...

http://nebaris.com/post/38/cargar-combos-en-cas...

SEGUIR
(http://www.linkedin.com
/company
(http://feeds.feedburner.com
(http://www.facebook.com
(https://plus.google.com
(https://twitter.com
(http://www.youtube.com
/nebaris)
/Nebaris)
/Nebaris)
/108107755178419878328)
/nebarisweb)
/user/nebarisvideos)

CATEGORAS
Back End (/blog/1/tag/8/back-end)
Bases de datos (/blog/1/tag/9/bases-de-datos)
Front End (/blog/1/tag/7/front-end)
Mvil (/blog/1/tag/10/movil)
Nebaris (/blog/1/tag/43/nebaris)
Profesional (/blog/1/tag/11/profesional)

+Visto
+Nuevo
8 consejos para escribir mejor cdigo (/post/65/8-consejos-para-escribir-mejor-codigo)
10 errores que comet como novato en PHP / MySQL (/post/17/10-errores-que-cometi-como-novatoen-php-mysql)
Introduccin a Android Studio (/post/43/introduccion-a-android-studio)
Acorden con CSS3 estilo Flat (/post/51/acordeon-con-css3-estilo-flat)
Web Services en C# (/post/40/web-services-en-c-sharp)

TAGS
AJAX (/blog/1/tag/22/ajax)
ASP.NET (/blog/1/tag/20/aspnet)

Android (/blog/1/tag/27/android)

ASP.NET MVC (/blog/1/tag/24/aspnet-mvc)

Bases de datos (/blog/1/tag/9/bases-de-datos)

14 de 15

Apache (/blog/1/tag/29/apache)
Back End (/blog/1/tag/8/back-end)

Bootstrap (/blog/1/tag/51/bootstrap)

C# (/blog/1/tag/6/c-sharp)

26/03/14 20:28

Cargar combos en cascada con jQuery, PHP y M...

CodeIgniter (/blog/1/tag/32/codeigniter)

http://nebaris.com/post/38/cargar-combos-en-cas...

CSS (/blog/1/tag/1/css)

Entity Framework (/blog/1/tag/42/entity-framework)

Eventos (/blog/1/tag/35/eventos)

Expresiones regulares (/blog/1/tag/31/expresiones-regulares)

Front End (/blog/1/tag/7/front-end)

Git (/blog/1/tag/26/git)

HTML (/blog/1/tag/2/html)
JavaScript (/blog/1/tag/3/javascript)
LINQ (/blog/1/tag/23/linq)

iOS (/blog/1/tag/28/ios)

Java (/blog/1/tag/5/java)

jQuery (/blog/1/tag/4/jquery)

PhoneGap (/blog/1/tag/36/phonegap)

Scrum (/blog/1/tag/40/scrum)

PHP (/blog/1/tag/17/php)

Python (/blog/1/tag/52/python)

Seguridad (/blog/1/tag/45/seguridad)

SEO (/blog/1/tag/49/seo)

SQL (/blog/1/tag/15/sql)

Tips (/blog/1/tag/33/tips)

Toolbox (/blog/1/tag/38/toolbox)

UX (/blog/1/tag/18/ux)

Nebaris (/blog/1/tag/43/nebaris)

Profesional (/blog/1/tag/11/profesional)

Ruby (/blog/1/tag/37/ruby)

JSON (/blog/1/tag/21/json)

Metodologas (/blog/1/tag/19/metodologias)

MySQL (/blog/1/tag/14/mysql)

Objective-C (/blog/1/tag/39/objective-c)
POO (/blog/1/tag/34/poo)

Freelance (/blog/1/tag/46/freelance)

Google Chrome (/blog/1/tag/30/google-chrome)

Markdown (/blog/1/tag/47/markdown)

Mvil (/blog/1/tag/10/movil)

Ebook (/blog/1/tag/48/ebook)

SQL Server (/blog/1/tag/16/sql-server)

Windows Azure (/blog/1/tag/50/windows-azure)

Twitter (/blog/1/tag/44/twitter)
Wireframing (/blog/1/tag/53/wireframing)

XML (/blog/1/tag/25/xml)

Login (/login)

2013 - 2014

15 de 15

26/03/14 20:28