PDA

Ver la Versión Completa : Lista desplegable dinámica


HombreSigma
11-07-2004, 06:18:18
Necesito actualizar una lista desplegable dinámicamente con base la escogencia del valor de otra lista desplegable que utilizaré como filtro.

Por ejemplo, si selecciono un país determinado en una lista desplegable que me actualice dinámicamente los estados de la lista desplegable de estados.


Obviamente en PHP.


Gracias por cualquier información.

kayetano
12-07-2004, 10:22:39
Hola

Yo lo suelo hacer de dos formas, suponiendo que tienes los valores en una base de datos:

* La primer, genero desde php un array javascript, y cuando un desplegable cambia con una funcion javascript modifico el contenido del segundo desplegable , con un ejemplo:
En este caso tengo familias y subfamilias, cuando cambio el desplegable de la familia se recarga la subfamilia:

Este es el codigo PHP para generar el array en javascript

...
<script language="JavaScript">
var subfamilias = Array();
<?
// familias( id int(), cabecera int(), nombre varchar() )
// Las familias con cabecera = 0 son de nivel 1 (familias)
// Las familias con cabecera > 0 son de nivel 2 (subfamilias)
// cabecera contiene el id de la familia de nivel 1, solo en subfamilias.
$familiaActiva = "";
$qFam = mysql_query( "SELECT f2.id AS idfamilia, f1.id AS idsubfamilia, f1.nombre AS subfamilia
FROM familias f1, familias f2
WHERE f1.cabecera = f2.id
ORDER BY idfamilia, subfamilia" );
while( $rFam = mysql_fetch_array( $qFam ) ) {
if( $familiaActiva != $rFam["idfamilia"] ) {
$familiaActiva = $rFam["idfamilia"];
echo "\tsubfamilias[$familiaActiva] = Array();\n"; // En javascript hay que definir todos los arrays.
$x = 1;
}
echo "\tsubfamilias[$familiaActiva][".$x++."] = new Option('".$rFam["subfamilia"]."', ". $rFam["idsubfamilia"] ." );\n";
}
?>
</script>
...


Con este código Javascript cambio el contenido del desplegable:

// El desplegable siempre lo inicializo con tamaño 1, ya que la primera
// opción es el texto "seleccione una familia"
<script language="JavaScript">
// - fam contiene el identificador de la familia seleccionada
// - subfam contiene el objeto "SELECT" de la subfamilia
function cambiaFamilia( fam, subfam ) {
if( fam > 0 ) {
subfam.disabled = false;
subfam.length = 1;
for ( x in subfamilias[fam] )
subfam.options[x] = subfamilias[fam][x];
} else {
subfam.length = 1;
subfam.disabled = true;
}
}
</script>


y por último quedaría la definición del objeto SELECT:

Familia<br>
<select name="nFamilia" class="envio" onchange="cambiaFamilia(this.value, this.form.nSubfam, this.form.nuevafamilia)" >
<option value="0">- Seleccione una familia -</option>
<?
$qFam = mysql_query ( "SELECT * FROM familias WHERE cabecera = 0 ORDER BY nombre" ) or die (mysql_error());
while ( $rFam = mysql_fetch_array ( $qFam ) ) { ?>
<option value="<?=$rFam["id"]?>"><?=$rFam["nombre"]?></option>
<? } ?>
</select>
...
Subfamilia<br>
<select name="nSubfam" class="envio" id="subfamilia">
<option value="0">- Seleccione una subfamilia -</option>
</select>


Este código es copy-paste de una página que realicé hace unos días, espero que no te sirva de algo y no te lie mucho.

* El segundo método es recargando la página y realizando la consulta de nuevo con valores diferentes.

Si los datos no los tienes en ninguna base de datos, y los conoces todos, puedes utilizar, simplemente, el primer método.