Date post: | 11-Jan-2016 |
Category: |
Documents |
Upload: | maskgutierrez |
View: | 60 times |
Download: | 0 times |
Back End (/blog/1/tag/8/back-end) jQuery (/blog/1/tag/4/jquery)
MySQL (/blog/1/tag/14/mysql) 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
(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 página que muestre dos combos, uno de
paises y otro de ciudades. Al seleccionar un país, con jQuery utilizaremos JSON para llamar a una
página PHP que buscará en la base de datos las ciudades que corresponden a ese país, las
devolverá y finalmente cargaremos el combo de ciudades.
Datos
La base de datos es simple, en este caso tenemos sólo dos tablas, con la siguiente relación:
0
Like
Like
Cargar combos en cascada con jQuery, PHP y M... http://nebaris.com/post/38/cargar-combos-en-cas...
1 de 15 26/03/14 20:28
Vamos a generar las tablas necesarias para el ejemplo.
Cargar combos en cascada con jQuery, PHP y M... http://nebaris.com/post/38/cargar-combos-en-cas...
2 de 15 26/03/14 20:28
---- 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, 'España'),(3, 'México'),(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),
Cargar combos en cascada con jQuery, PHP y M... http://nebaris.com/post/38/cargar-combos-en-cas...
3 de 15 26/03/14 20:28
(12, 'Cali', 4);
---- Restricción para la tabla `ciudades`--ALTER TABLE `ciudades` ADD CONSTRAINT `paises_ciudades` FOREIGN KEY (`idpais`) REFERENCES `paises` (`idpais`);
Conexión con base de datos
Vamos a crear un archivo que nos administre la conexión con la base de datos, de esta forma se
encargará de obtener la conexión, 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; }?>
Países y ciudades
Cargar combos en cascada con jQuery, PHP y M... http://nebaris.com/post/38/cargar-combos-en-cas...
4 de 15 26/03/14 20:28
Ahora creamos dos archivos, uno para los países:
// pais.php<?php include("db.php");
// esta función se va a llamar al cargar el primer combo function obtenerTodosLosPaises() { $paises = array(); $sql = "SELECT idpais, nombre FROM paises";
$db = obtenerConexion();
// obtenemos todos los países $result = ejecutarQuery($db, $sql);
// creamos objetos de la clase país 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:
Cargar combos en cascada con jQuery, PHP y M... http://nebaris.com/post/38/cargar-combos-en-cas...
5 de 15 26/03/14 20:28
// ciudad.php<?php include("db.php");
// si se está enviando por POST el id del país // 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 arreglo 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.
Cargar combos en cascada con jQuery, PHP y M... http://nebaris.com/post/38/cargar-combos-en-cas...
6 de 15 26/03/14 20:28
Estructura
En la estructura de nuestro ejemplo, tenemos una llamada para incluir el archivo de países; con esto
cargamos el primer combo iterando el arreglo de países. Al segundo combo, sólo le agregamos una
opción que indica que se debe elegir un país.
Cargar combos en cascada con jQuery, PHP y M... http://nebaris.com/post/38/cargar-combos-en-cas...
7 de 15 26/03/14 20:28
// 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/jquery.min.js"></script> <link rel="stylesheet" href="style.css"></head><body> <div class="divContenedor"> <h2>Combos de selección anidados</h2> <div class="divLabels"> <label for="cboPaises">Paises</label> </div> <div class="divSelects"> <select id="cboPaises"> <option value="0">Seleccione un país</option> <?php $paises = obtenerTodosLosPaises(); foreach ($paises as $pais) { echo '<option value="'.$pais->id.'">'.$pais->nombre.'</option>'; } ?> </select> </div>
<div class="divLabels"> <label for="cboCiudades">Ciudades</label> </div> <div class="divSelects"> <select id="cboCiudades"> <option value="0">Seleccione un país</option> </select> </div> </div> </body></html>
jQuery
Cargar combos en cascada con jQuery, PHP y M... http://nebaris.com/post/38/cargar-combos-en-cas...
8 de 15 26/03/14 20:28
Mediante jQuery, cada vez que se modifique el valor del combo, debemos obtener el valor de la
opción seleccionada. Si este valor es mayor a 0, utilizamos la función post, para llamar al archivo
PHP y que nos devuelva un arreglo de ciudades.
Cargar combos en cascada con jQuery, PHP y M... http://nebaris.com/post/38/cargar-combos-en-cas...
9 de 15 26/03/14 20:28
$(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 país if(pais > 0) { //creamos un objeto JSON var datos = { idPais : $(this).val() };
// utilizamos la función 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 través 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 país var $comboCiudades = $("#cboCiudades"); $comboCiudades.empty(); $comboCiudades.append("<option>Seleccione un país</option>"); } });});
Resumen
Cargar combos en cascada con jQuery, PHP y M... http://nebaris.com/post/38/cargar-combos-en-cas...
10 de 15 26/03/14 20:28
Este ejemplo simple, nos sirve para poder entender cómo 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 países tienen acentos o eñes. Por otro lado, la versión 1.10.1 de jQuery tiene problemas
con Internet Explorer, por lo que hay que utilizar la versión 1.10.2.
¿Qué opinás de este ejemplo?
Gracias por pasar por Nebaris, cualquier consulta sobre este artículo la podés hacer en los
comentarios o escribiendo a [email protected] (mailto:[email protected]).
Autor - Gabriel Kaplan
Artículos relacionados
Mostrar videos de un canal de YouTube en ASP.NET (/post/23/mostrar-videos-de-un-
canal-de-youtube-en-aspnet)
Sesiones en PHP (/post/64/sesiones-en-php)
Introducción a Ruby - parte 3 (/post/92/introduccion-a-ruby--parte-3)
Desarrollo web práctico con ASP.NET MVC, Entity Framework y Bootstrap (/post
/127/desarrollo-web-practico-con-aspnet-mvc-entity-framework-y-bootstrap)
¿Cómo utilizar C# y Python juntos? (/post/128/como-utilizar-c-sharp-y-python-juntos)
// RECURSOS GRATIS TODAS LAS SEMANAS
0
Like
Like
Programador, músico 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)
Cargar combos en cascada con jQuery, PHP y M... http://nebaris.com/post/38/cargar-combos-en-cas...
11 de 15 26/03/14 20:28
+1200 personas ya se suscribieron. Suscribite vos también al newsletter TOOLBOX y
recibí en tu email una recopilación semanal de las herramientas más importantes para
diseño y programación. Todos los miércoles. Fácil de desuscribirse. No spam. Cuidamos
tu dirección de email y no la compartimos. VERIFICÁ QUE EL FILTRO DE SPAM NO
BLOQUEE NUESTROS EMAILS.
Dirección de email
Nombre
SUSCRIBITE
Cargar combos en cascada con jQuery, PHP y M... http://nebaris.com/post/38/cargar-combos-en-cas...
12 de 15 26/03/14 20:28
18 Comentarios Nebaris Accederd
Ordenar por los más antigüos Compartir ⤤
Únete a la discusión...
• Responder •
Hernan • hace 7 meses
Excelente ejemplo, muy util.
• Responder •
Gabriel Kaplan • hace 7 mesesModerador > Hernan
Muchas gracias por tu comentario Hernán.
• Responder •
luis • hace 7 meses
calidad muy bueno
• Responder •
Gabriel Kaplan • hace 7 mesesModerador > luis
Muchas gracias Luis por tu comentario
comrlr • hace 7 meses
Hummm. La demo no me funciona en Internet Explorer. Quizás lo correcto sería en el
archivo "pais.php" cambiar las siguientes líneas:
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 eñes, cambiar las
siguientes líneas:
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);
Compartir ›
Favorito ★
Compartir ›
Compartir ›
Compartir ›
Cargar combos en cascada con jQuery, PHP y M... http://nebaris.com/post/38/cargar-combos-en-cas...
13 de 15 26/03/14 20:28
SEGUIR
(http://www.facebook.com
/Nebaris)
(https://plus.google.com
/108107755178419878328)
(https://twitter.com
/nebarisweb)
(http://www.youtube.com
/user/nebarisvideos)
(http://www.linkedin.com
/company
/nebaris)
(http://feeds.feedburner.com
/Nebaris)
CATEGORÍAS
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)
Móvil (/blog/1/tag/10/movil)
Nebaris (/blog/1/tag/43/nebaris)
Profesional (/blog/1/tag/11/profesional)
8 consejos para escribir mejor código (/post/65/8-consejos-para-escribir-mejor-codigo)
10 errores que cometí como novato en PHP / MySQL (/post/17/10-errores-que-cometi-como-novato-
en-php-mysql)
Introducción a Android Studio (/post/43/introduccion-a-android-studio)
Acordeón 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) Android (/blog/1/tag/27/android) Apache (/blog/1/tag/29/apache)
ASP.NET (/blog/1/tag/20/aspnet) ASP.NET MVC (/blog/1/tag/24/aspnet-mvc) Back End (/blog/1/tag/8/back-end)
Bases de datos (/blog/1/tag/9/bases-de-datos) Bootstrap (/blog/1/tag/51/bootstrap) C# (/blog/1/tag/6/c-sharp)
+Visto
+Nuevo
Cargar combos en cascada con jQuery, PHP y M... http://nebaris.com/post/38/cargar-combos-en-cas...
14 de 15 26/03/14 20:28
Login (/login)
© 2013 - 2014
CodeIgniter (/blog/1/tag/32/codeigniter) CSS (/blog/1/tag/1/css) Ebook (/blog/1/tag/48/ebook)
Entity Framework (/blog/1/tag/42/entity-framework) Eventos (/blog/1/tag/35/eventos)
Expresiones regulares (/blog/1/tag/31/expresiones-regulares) Freelance (/blog/1/tag/46/freelance)
Front End (/blog/1/tag/7/front-end) Git (/blog/1/tag/26/git) Google Chrome (/blog/1/tag/30/google-chrome)
HTML (/blog/1/tag/2/html) iOS (/blog/1/tag/28/ios) Java (/blog/1/tag/5/java)
JavaScript (/blog/1/tag/3/javascript) jQuery (/blog/1/tag/4/jquery) JSON (/blog/1/tag/21/json)
LINQ (/blog/1/tag/23/linq) Markdown (/blog/1/tag/47/markdown) Metodologías (/blog/1/tag/19/metodologias)
Móvil (/blog/1/tag/10/movil) MySQL (/blog/1/tag/14/mysql) Nebaris (/blog/1/tag/43/nebaris)
Objective-C (/blog/1/tag/39/objective-c) PhoneGap (/blog/1/tag/36/phonegap) PHP (/blog/1/tag/17/php)
POO (/blog/1/tag/34/poo) Profesional (/blog/1/tag/11/profesional) Python (/blog/1/tag/52/python)
Ruby (/blog/1/tag/37/ruby) Scrum (/blog/1/tag/40/scrum) Seguridad (/blog/1/tag/45/seguridad)
SEO (/blog/1/tag/49/seo) SQL (/blog/1/tag/15/sql) SQL Server (/blog/1/tag/16/sql-server)
Tips (/blog/1/tag/33/tips) Toolbox (/blog/1/tag/38/toolbox) Twitter (/blog/1/tag/44/twitter)
UX (/blog/1/tag/18/ux) Windows Azure (/blog/1/tag/50/windows-azure) Wireframing (/blog/1/tag/53/wireframing)
XML (/blog/1/tag/25/xml)
Cargar combos en cascada con jQuery, PHP y M... http://nebaris.com/post/38/cargar-combos-en-cas...
15 de 15 26/03/14 20:28