Selects anidados con AJAX y JQuery

Publicado en September 30, 2009 by Damian

Los selects anidados o dependent cascading selects como dicen los ingleses , son usados hoy en día en la mayoria de formularios cuando nos registramos en una web. El ejemplo más comun es a la hora de elegir nuestro pais de procedencia , donde seguidamente carga en otro select las provincias de dicho pais. El otro día precísamente publique un listado completo de paises + provincias.

Hacer esto con JQuery es más que sencillo. Tan solo necesitaremos 3 archivos:

index.php Donde tendremos un formulario simple con sus correspondientes selects.

Un archivo encargado de buscar las provincias según el pais indicado. Primero se conectará a la base de datos, y luego devolverá los resultados.

ajax_provincias.php

<?
include_once ('db.php');
$conn= get_db_conn();
?>
<?
$conn=get_db_conn();
$pais= cleanQuery($_GET['pais']);
$provincias=mysql_query("SELECT * FROM estados WHERE relacion = '$pais'",$conn);
?><?
while( $row= mysql_fetch_assoc($provincias)){
echo '<option value="'.$row['id'].'">'.$row['estado'].'</option>';
}
?>

Y por último el código JQuery que hará la magia de pasar el Pais seleccionado al archivo ajax_provincias.php mediante AJAX y luego cargará los valores devueltos dentro del segundo SELECT

cargarProvincias.js

function cargarProvincias(){
$('#provincia').html('<option selected>Cargando</option>');

var idPais= $('#pais').val();

var toLoad= 'cargar_provincias.php?pais='+ idPais ;
$.post(toLoad,function (responseText){

$('#provincia').html(responseText);

});

}

Para terminar , le pueden echar una ojeada al DEMO ONLINE
Y descargar el código del ejemplo.

Comparte este artículo: