Selects dependientes (Listas Enlazadas)

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

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

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

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();
?></blockquote>
<em>formulario.php</em> » Solo el codigo php que va entre los <select> cod_php </select>
<blockquote><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" <span style="color: #008000;">src="jquery-1.3.2.min.js</span><strong>"</strong></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);
<span style="color: #ff0000;">$("#cmbciudades").html("");</span>
});
});
})

<span style="color: #333399;">// 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);
});
});
})</span>

<strong> });</strong>

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">
    <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>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: select_depend.zip

enjoy!


About this entry