Selects anidados con AJAX y JQuery
Categories: JQuery, Tutoriales - Tags: selects anidadosLos 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script type="text/javascript" src="cargarProvincias.js"></script> <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
1 2 3 4 5 6 7 8 9 10 11 12 13 | <? 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
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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.
