Selects dependientes

Repaso una de las mejores practicas que con las que me he tropesado sobre listas/combos/selects dependientes que ofrece Miguel Manchego en su blog, en vista de que solo puedo velar y garantizar por mi propio espacio (este sitio), acostumbro recopilar la informacion de otras partes para evitar algo que ya me ha pasado antes, ir a un link y encontrarme con que el autor elimino el contenido o algun otro problema, el cache de google ayuda, pero no siempre. Aunque cae en redundancia ver como se repiten las cosas en distintos portales web, eso tambien ayuda a los buscadores a localizar la informacion mas rapidamente, esto ultimo dependiendo del posicionamiento SEO del lugar.

Descargamos la libreria jqueryjs de jQuery la cual ayudara en esta tarea.

El ejemplo es sencillo, 2 o 3 selects o los que se quieran, el 1ero se carga normal de un codigo php, ya el resto que depende del select padre/principal cargaran sus datos dependiendo de la seleccion de quien dependen.

Esto es un ejemplo del clasico formulario de pais, estado y ciudad. Descarga de aqui el .sql a importar de las tablas que contienen las tablas de paises, estados y ciudades (esta ultima tabla solo tiene 2 o 3 ciudades del estado de un solo pais).

conexion.php

<?php
function conectar(){
$servidor = mysql_connect(“localhost”,”usuario”,”clave”) or die(‘Error de conexion al Servidor: ‘ . mysql_error());
$basedatos = mysql_select_db(“mi_basedatos”) or die(‘Error de conexion con la BD: ‘ . mysql_error());
}
function desconectar(){
mysql_close();
}
?>

estados.php

<?php
include ‘conexion.php’;
conectar();
$resultado = mysql_query(“select * from estados where id_pais = ‘$_POST[elegido]'”);
if($fila = mysql_fetch_array($resultado)){
do{
echo “<option value=”.$fila[‘id_estado’].”>”.$fila[‘estado’].”</option>”;
}while($fila = mysql_fetch_array($resultado))
}
mysql_free_result($resultado);
desconectar();
?>

ciudades.php

<?php
include ‘conexion.php’;
conectar();
$resultado = mysql_query(“select * from ciudades where id_estado = ‘$_POST[elegido]'”);
if($fila = mysql_fetch_array($resultado)){
do{
echo “<option value=”.$fila[‘id_ciudad’].”>”.$fila[‘ciudad’].”</option>”;
}while($fila = mysql_fetch_array($resultado))
}
mysql_free_result($resultado);
desconectar();
?>

formulario.php » Solo el codigo php que va entre los <select> cod_php </select>

<?php
include ‘conexion.php’;
conectar();
$resultado = mysql_query(“select * from paises”);
if($fila = mysql_fetch_array($resultado)){
do{
echo ‘<option value=”‘.$fila[‘id_pais’].'”>’.$fila[‘pais’].'</option>’;
}while($fila = mysql_fetch_array($resultado));
}
mysql_free_result($resultado);
desconectar();
?>

El codigo javascript que sera el encargado de cargar las listas dependientes en el head de la pagina:

<script language=”javascript” src=”jquery-1.3.2.min.js></script>
<script language=”javascript”>
$(document).ready(function(){
$(“#cmbpais”).change(function () {
$(“#cmbpais option:selected”).each(function () {
elegido=$(this).val();
$.post(“estados.php”, { elegido: elegido }, function(data){
$(“#cmbestados”).html(data);
$(“#cmbciudades”).html(“”);
});
});
})

// Este puede ponerse en comentario si no se dispone de un 3er combo:
$(“#cmbestados”).change(function () {
$(“#cmbestados option:selected”).each(function () {
elegido=$(this).val();
$.post(“ciudades.php”, { elegido: elegido }, function(data){
$(“#cmbciudades”).html(data);
});
});
})

});
</script>

En verde se aprecia el llamado de la libreria jquery, en negrita la funcion padre la cual tiene dos subfunciones y en azul marco una de las 2 subfunciones. Si solo tenemos 1 solo combo dependiente, la linea indicada en rojo y el codigo en azul no estarian, en cambio si tenemos mas combos dependientes, uno dependiente del previo, copiamos y pegamos mas abajo el codigo de una de las subfunciones y editamos a que combo previo pertenece, a que archivo .php llamara la carga de los datos y a que combo se cargaran los datos.

El codigo del formulario completo (ejemplo):

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&gt;
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>Untitled Document</title>
</head>

<script language=”javascript” src=”js/jquery-1.3.2.min.js”></script>
<script language=”javascript”>
$(document).ready(function(){
$(“#cmbpais”).change(function () {
$(“#cmbpais option:selected”).each(function () {
elegido=$(this).val();
$.post(“estados.php”, { elegido: elegido }, function(data){
$(“#cmbestados”).html(data);
$(“#cmbciudades”).html(“”);
});
});
})
// Este puede ponerse en comentario si no se dispone de un 3er combo:
$(“#cmbestados”).change(function () {
$(“#cmbestados option:selected”).each(function () {
elegido=$(this).val();
$.post(“ciudades.php”, { elegido: elegido }, function(data){
$(“#cmbciudades”).html(data);
});
});
})

});
</script>

<body>
<form name=”form1″>
<center>
<table border = “1”>
<tr><td>Nombre:</td><td><input type=”text”></td></tr>
<tr><td>Pais:</td><td>
<select id=”cmbpais”>
<?php
include ‘conexion.php’;
conectar();
$consulta = “select * from paises”;
$resultado = mysql_query($consulta);
if($fila=mysql_fetch_array($resultado)){
do{
echo ‘<option value=”‘.$fila[‘id_pais’].'”>’.$fila[‘pais’].'</option>’;
}while($fila = mysql_fetch_array($resultado));
}
desconectar();
?>
</select></td></tr>
<tr><td>Estado:</td><td><select id=”cmbestados”></select></td></tr>
<tr><td>Ciudad:</td><td><select id=”cmbciudades”></select></td></tr>
</table>
</center>
</form>
</body>
</html>

Descarga del ejemplo: selects dependientes con valor agregado.

enjoy!


About this entry