Select de 3 niveles

[ceSharp]

Hola andresenrique,

He estado revisando este código y, retocándolo un poco, me ha funcionado. Es sólo una idea de cómo podrías hacerlo, posiblemente haya otras muchas formas de hacerlo mas sencillo porque estamos cargando 'a pelo' todas los estados y ciudades. En un ejemplo como este es sencillo ya que solo cargamos 3 estados y 3 ciudades por estado, pero seguro que se puede mejorar usando bucles o llamando a otras funciones para cargar países, estados y ciudades. Por cierto, he 'españolizado' el ejemplo, que si no no me enteraba! (ahora son paises, regiones y ciudades). Este sería el código javascript:

<script type="text/javascript">
function agregarOpciones(form)
{debugger;
var pais = form.pais.options;
var region = form.region.options;
var ciudad = form.ciudad.options;
var indiceRegion = region.selectedIndex;
region.length = null;
ciudad.length = null;

if(pais.selectedIndex == 0)
{
var regionesVacias = new Option("<-- esperando selección");
var ciudadesVacias = new Option("<-- esperando selección");
region[0] = regionesVacias;
ciudad[0] = ciudadesVacias;

}
if(pais.selectedIndex == 1)
{
var cargaRegiones1 = new Option("C. Mancha");
var cargaRegiones2 = new Option("Catalunya");
var cargaRegiones3 = new Option("C. Valenciana");
region[0] = new Option("<-- seleccione región");
region[1] = cargaRegiones1;
region[2] = cargaRegiones2;
region[3] = cargaRegiones3;
if(indiceRegion == 0)
{
var ciudadesVacias = new Option("<-- esperando selección");
ciudad[0] = ciudadesVacias;
}
if(indiceRegion == 1)
{
var cargaCiudades1 = new Option("Toledo");
var cargaCiudades2 = new Option("C. Real");
var cargaCiudades3 = new Option("Albacete");
ciudad[0] = new Option("<-- seleccione ciudad");
ciudad[1] = cargaCiudades1;
ciudad[2] = cargaCiudades2;
ciudad[3] = cargaCiudades3;
region.selectedIndex = 1;
}
if(indiceRegion == 2)
{
var cargaCiudades1 = new Option("Barcelona");
var cargaCiudades2 = new Option("Tarragona");
var cargaCiudades3 = new Option("Lleida");
ciudad[0] = new Option("<-- seleccione ciudad");
ciudad[1] = cargaCiudades1;
ciudad[2] = cargaCiudades2;
ciudad[3] = cargaCiudades3;
region.selectedIndex = 2;
}
if(indiceRegion == 3)
{
var cargaCiudades1 = new Option("Alicante");
var cargaCiudades2 = new Option("Castellón");
var cargaCiudades3 = new Option("Valencia");
ciudad[0] = new Option("<-- seleccione ciudad");
ciudad[1] = cargaCiudades1;
ciudad[2] = cargaCiudades2;
ciudad[3] = cargaCiudades3;
region.selectedIndex = 3;
}
}
}

</script>

...y este el del form:

<form name="ejemplo2" id="ejemplo2" method="POST" target="_blank" action="pagina.htm">

<select name="pais" id="pais" onChange="agregarOpciones(this.form)">

<option value="0">[seleccione una opción]</option>

<option value="1">España</option>


</select>



<select name="region" id="region" onchange="agregarOpciones(this.form)">

<option value="0"><-- esperando selección</option>

</select>

<select name="ciudad" id="ciudad">

<option value="0"><-- esperando selección</option>

</select>


<input type="submit" value="Enviar"></form>


Insisto en que se puede mejorar y no dudo que cualquiera de los grandes colaboradores de este foro lo harán mejor que yo, pero en este ejemplo vas a poder ver fácilmente como se cargan y descargan los combos (o selects, como quieras llamarlos...)

Salu2