En este tutorial veremos como lograr una lista enlazada dinámica, utilizando HTML,

JavaScript, PHP y base de datos MySQL.

Pues, con HTML únicamente no se puede ya que HTML es un lenguaje estático.

Podrías usar PHP que es dinámico, pero bueno tampoco podrás hacerlo con PHP ya que se
ejecuta en el servidor y tu requieres de una acción en el navegador para cargar la segunda
lista.

Y bien, si hablamos de lenguajes para interactuar con el usuario eso es JavaScript, pero
claro bueno no funciona tampoco ya que JavaScript no puede ir a tu base de datos.

Otra forma es usar AJAX o acrónimo de Asynchronous JavaScript And XML (JavaScript y
XML asíncronos, donde XML es un acrónimo de eXtensible Markup Language)

http://es.wikipedia.org/wiki/AJAX

que no es un lenguaje es mas bien la nueva forma de llamarle a la mezcla de esos lenguajes
como XML, JavaScript, HTML, etc. pero lo haremos sin el nombre raro.

Y ahora paso a explicar la solución a lo que preguntas :)

Como elementos HTML importantes vamos a tener 3 elementos importantes, estos son:

frmDatos que es el formulario que contiene las listas

selCiudades que es la lista donde seleccionas las ciudades

selPropiedades que es la lista donde seleccionas las propiedades

El formulario, es bien simple y se ve como el link que puse arriba. El código HTML del
mismo seria así:

<form id="frmDatos" name="frmDatos" method="post" action="">

<label>Ciudades:
<select name="selCiudades" size="6" id="selCiudades">
</select>
</label>
<label>Propiedades:
<select name="selPropiedades" size="6" id="selPropiedades">
</select>
</label>
</form>

Tu lo puedes escribir o generar con DreamWeaver, lo importante es el nombre de las 2

listas y el formulario (selCiudades, selPropiedades, frmDatos).
Simple no ?? :P

Bien, el siguiente tema es que según dices debes cargar la información desde una base de
datos, yo en mi ejemplo cargare las ciudades desde la base de datos y la tabla ciudades
(explicada en el tutorial de bienes raíces).

La lista de Propiedades no se carga en este momento ya que es producto del resultado de

seleccionar una Ciudad, por tanto lo primero y único que cargaremos ahora son las
ciudades.

Para cargar las ciudades debemos agregar código PHP que permita leer esas ciudades desde
la tabla ciudades de la base de datos :), o sea que al HTML lo modificamos para que quede
así:

<label>Ciudades:
<select name="selCiudades" size="6" id="selCiudades">
<?php
$tablaCiudades = mysql_query('SELECT * FROM ciudades ORDER BY nombre ASC');
while ($registroCiudad = mysql_fetch_array($tablaCiudades)) {
?>
<option value="<?php echo $registroCiudad['id']; ?>"><?php echo
$registroCiudad['nombre']; ?></option>
<?php
}
mysql_free_result($tablaCiudades);
?>
</select>
</label>

Explico ....

$tablaCiudades = mysql_query('SELECT * FROM ciudades ORDER BY nombre ASC');

en esa línea, se seleccionan todos los registros de la tabla ciudades ordenados por nombre,
que usaremos para cargar la lista.

while ($registroCiudad = mysql_fetch_array($tablaCiudades)) {

en esta línea indicamos que se repetirá el fragmento de código que este entre { } (llaves)
tantas veces como registros (o ciudades) existan.

<option value="<?php echo $registroCiudad['id']; ?>"><?php echo

$registroCiudad['nombre']; ?></option>

y esa es la línea que se repite, o sea una opción (opción) de la lista por cada ciudad, donde
se guardara en la lista el id (numero de ciudad) y el nombre de la ciudad :)
mysql_free_result($tablaCiudades);

finaliza y cierra la tabla para liberar la memoria.

Con este código logramos gran parte del trabajo, que es presentar el formulario, con todas
las ciudades en la lista de ciudades.

Luego de cargada las ciudades, debemos continuar con esto, y el siguiente paso es que
cuando un usuario ve una lista de ciudades, va a elegir una de ellas y se deberían mostrar
las propiedades de esa ciudad :), bueno acá para interactuar con el usuario, necesitamos
JavaScript, y lo vamos a usar para generar un Evento OnChange, este evento se ejecuta
cada vez que alguien cambia la selección de la lista en este caso, cuando alguien selecciona
por primera vez una ciudad o selecciona otra.

Esta linea es sencilla, ya que donde hoy tenemos así:

<select name="selCiudades" size="6" id="selCiudades">

le agregamos el evento onchange correspondiente para llamar a la función javascript de

carga de propiedades, esta linea queda así:

<select name="selCiudades" size="6" id="selCiudades"

onchange="ComponerLista(document.forms.frmDatos.selCiudades[selectedIndex].value);"
>

Esa linea llama a la función ComponerLista y le envía como parámetro el número de

ciudad seleccionada (selectedIndex) en la lista ciudades (selCiudades) que esta en el
formulario de datos (frmDatos) en la pagina actual (document).

Fácil no ?

Lista esta parte, ahora debemos escribir el código JavaScript de la función

ComponerLista :)

Esta funcion es bastante simple, y su codigo es asi:

function ComponerLista(xPro) {
document.forms.frmDatos.selCiudades.disabled = true;
document.forms.frmDatos.selPropiedades.length = 0;
CargarPropiedades(xPro);
document.forms.frmDatos.selCiudades.disabled = false;
}

Primero desactiva la lista de ciudades,

document.forms.frmDatos.selCiudades.disabled = true;
de forma que nadie pueda dar click mientras se carga, luego deja vacía la lista de
propiedades (por si había algo seleccionado),

document.forms.frmDatos.selPropiedades.length = 0;

luego Carga las Propiedades que están en esa ciudad, por medio de otra función que
veremos mas adelante,

CargarPropiedades(xPro);

a la cual le envía como parámetro el id de la ciudad.

Luego de cargadas las propiedades vuelve a permitir que demos click en a lista de ciudades
(por si queremos cambiar) activándola de nuevo,

document.forms.frmDatos.selCiudades.disabled = false;

Bien, así es de simple esta función :)

La función de CargarPropiedades también usara JavaScript, para generar el HTML de la

lista de Propiedades según esa ciudad, pero también usara PHP para leer de la base de datos
la información, el código resultante es el siguiente:

function CargarPropiedades(xCiu) {
var o
document.forms.frmDatos.selPropiedades.disabled=true;
<?php
$tablaPropiedades = mysql_query('SELECT * FROM propiedades ORDER BY idciudad
ASC');
while ($registroPropiedad = mysql_fetch_array($tablaPropiedades)) {
?>
if (xCiu == <?php echo $registroPropiedad["idciudad"]; ?>) {
o = document.createElement("OPTION");
o.text = '<?php echo $registroPropiedad["titulo"]; ?>';
o.value = <?php echo $registroPropiedad["id"]; ?>;
document.forms.frmDatos.selPropiedades.options.add (o);
}
<?php
}
mysql_free_result($tablaPropiedades);
?>
document.forms.frmDatos.selPropiedades.disabled=false;
}

Primero creamos una variable para guardar el objeto OPTION que contenga cada Propiedad
que se genera dinámicamente y se agregara a la lista Propiedades,
var o

luego desactivamos la lista de propiedades para que nadie pueda dar click hasta que no
termine la carga automatica,

document.forms.frmDatos.selPropiedades.disabled=true;

el siguiente codigo es PHP (se indica con <?php ?>) y es igual al que usamos hace un rato
para cargar las ciudades, solo que este selecciona las propiedades y repite tantas veces
como propiedades existan,

<?php $tablaPropiedades = mysql_query('SELECT * FROM propiedades ORDER BY

idciudad ASC'); while ($registroPropiedad = mysql_fetch_array($tablaPropiedades)) { ?>

lo que va a repetir, es un código JavaScript que comienza con un IF que controlara si esa
propiedad es de una ciudad igual a la elegida (xCiu) en la lista de ciudades,

if (xCiu == ) {

si es una propiedad de la ciudad elegida, genera un objeto tipo OPTION (que son los que
forman la lista), en la variable "o" que habíamos creado

o = document.createElement("OPTION");

luego a ese elemento de la lista le asigna en la propiedad TEXT el titulo (o nombre) de esa
propiedad,

o.text = '';

la propiedad TEXT es el texto que vemos en cada elemento de la lista, luego le asigna a la
propiedad VALUE (Valor) el id de esa propiedad o sea su numero de identificación,

o.value = ;

luego de que el elemento OPTION de esa propiedad esta listo, lo agrega en la lista de
propiedades HTML mediante la siguiente linea de codigo JavaScript,

document.forms.frmDatos.selPropiedades.options.add (o);

por ultimo se cierran la llaves del while } y la del if }, y liberamos de la memoria la tabla
Propiedades,

mysql_free_result($tablaPropiedades);

y volvemos a activar la lista para que puedan elegir elementos de ella :)

document.forms.frmDatos.selPropiedades.disabled=false;

y listo, esto es todo :) asi de sencillo se logran dos listas enlazadas usando HTML,
JavaScript, PHP y MySQL.

Les dejo el código completo con la conexión a la base de datos y el HTML completo.

<?php
$conexion = mysql_connect('localhost', 'taller', 'secreto');
mysql_select_db('inmobiliaria');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Listas Dinamicas</title>
<script language="javascript">
function ComponerLista(xPro) {
document.forms.frmDatos.selCiudades.disabled = true;
document.forms.frmDatos.selPropiedades.length = 0;
CargarPropiedades(xPro);
document.forms.frmDatos.selCiudades.disabled = false;
}
function CargarPropiedades(xCiu) {
var o
document.forms.frmDatos.selPropiedades.disabled=true;
<?php
$tablaPropiedades = mysql_query('SELECT * FROM propiedades ORDER BY idciudad
ASC');
while ($registroPropiedad = mysql_fetch_array($tablaPropiedades)) {
?>
if (xCiu == <?php echo $registroPropiedad["idciudad"]; ?>) {
o = document.createElement("OPTION");
o.text = '<?php echo $registroPropiedad["titulo"]; ?>';
o.value = <?php echo $registroPropiedad["id"]; ?>;
document.forms.frmDatos.selPropiedades.options.add (o);
}
<?php
}
mysql_free_result($tablaPropiedades);
?>
document.forms.frmDatos.selPropiedades.disabled=false;
}
</script>
</head>
<body>
<form id="frmDatos" name="frmDatos" method="post" action="">
<label>Ciudades:
<select name="selCiudades" size="6" id="selCiudades"
onchange="ComponerLista(document.forms.frmDatos.selCiudades[selectedIndex].value);"
>
<?php
$tablaCiudades = mysql_query('SELECT * FROM ciudades ORDER BY nombre ASC');
while ($registroCiudad = mysql_fetch_array($tablaCiudades)) {
?>
<option value="<?php echo $registroCiudad['id']; ?>"><?php echo
$registroCiudad['nombre']; ?></option>
<?php
}
mysql_free_result($tablaCiudades);
?>
</select>
</label>
<label>Propiedades:
<select name="selPropiedades" size="6" id="selPropiedades">
</select>
</label>
</form>
</body>
</html>
<?php
mysql_close($conexion);
?>