Mas que Wordpress - Tutoriales, recursos web, JQuery y PHP, Wordpress , twitter y muchos recursos más » selects anidados http://www.masquewordpress.com Tutoriales y recursos web sobre JQuery , PHP, Wordpress , twitter. Aprende diseño web y programación Mon, 06 Feb 2012 15:02:11 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Selects anidados con AJAX y JQuery http://www.masquewordpress.com/selects-anidados-con-ajax-y-jquery/ http://www.masquewordpress.com/selects-anidados-con-ajax-y-jquery/#comments Wed, 30 Sep 2009 03:18:30 +0000 Damian http://masquewordpress.com/?p=342 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.

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.

]]> http://www.masquewordpress.com/selects-anidados-con-ajax-y-jquery/feed/ 7