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.
<script type="text/javascript" src="../jquery.js"></script>
<?
include_once ('db.php');
$conn= get_db_conn();
$paises=mysql_query("SELECT * from paises",$conn);
?>
<form id="form" action="" method="post" class="niceform">
<dl><dt> <label><span class="rojo">*</span> Pais :</label></dt>
<dd> <select name="pais" id="pais" onchange="cargarProvincias();" />
<option value="null">Selecciona un pais</option>
<? while($row=mysql_fetch_assoc($paises)){
print '<option value="'.$row['id'].'" >'.$row['pais'].'</option>';
}?>
</select>
</dd>
</dl>
<dl><dt> <label><span class="rojo">*</span> Provincia :</label></dt>
<dd> <select name="provincia" id="provincia" />
<option value="null">Selecciona un pais</option>
</select></dd>
</dl>
</form>
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
$('#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.
Links Sponsors
Tags: selects anidados
Categoría: JQuery, Tutoriales
Con tu lector preferido.
Via Email.
Por Twitter.
hola, y donde esta la base de datos
Leete bien el post. Al principio puse el link http://blog.timersys.com/recursos/listado-complet...
Muy bueno tu post amigo y dime como haría con tres combos anidados: Nivel Educativo, Grado, Seccion