Te propongo otra manera:
Código Javascript
:
Ver originalvar comboCont = document.getElementById("continente"),
comboPais = document.getElementById("pais"),
comboCiud = document.getElementById("ciudad"),
continentes = {
America: {
USA: ["San Francisco", "Seattle", "San Antonio"],
Perú: ["Lima", "Tacna", "Cusco"],
México: ["México D.F.", "Tijuana", "Guadalajara"]
},
Europa: {
España: ["Barcelona", "Valencia", "Madrid"],
Italia: ["Roma", "Venecia", "Milano"]
}
},
cambiaCiudad = function(contVal, paisVal){
var pais = continentes[contVal][paisVal];
comboCiud.innerHTML = null;
for (var j in pais){
var opt = document.createElement("option");
opt.value = pais[j];
opt.innerHTML = pais[j];
comboCiud.appendChild(opt);
}
},
cambiaPais = function(contVal){
var cont = continentes[contVal];
comboPais.innerHTML = null;
for (var i in cont){
var opt = document.createElement("option");
opt.value = i;
opt.innerHTML = i;
comboPais.appendChild(opt);
}
cambiaCiudad(contVal, comboPais.value);
};
comboCont.addEventListener("change", function(){
cambiaPais(this.value);
}, false);
comboPais.addEventListener("change", function(){
cambiaCiudad(comboCont.value, this.value);
}, false);
cambiaPais(comboCont.value);
Ahora, la explicación. Primero, tomo a los tres combos que debo de tener en el documento, siendo cada uno en donde irán los continentes, países y ciudades, respectivamente. Luego, creo un objeto literal en donde irán los continentes, teniendo cada uno de ellos un objeto literal con los países respectivos y estos, un array con las ciudades que les correspondan. Cuando elijamos una opción del combo de los continentes, ejecutaremos la función
cambiaPais, a la cual le pasaremos como argumento el valor del combo de los continentes. En dicha función, tomamos al continente equivalente al valor seleccionado en el combo de los continentes, dejamos en blanco al combo de los países (por si hubieron valores previamente) y lo llenamos con los países que posee el continente equivalente a la opción seleccionada en el combo de los continentes. Enseguida, ejecutamos la función
cambiaCiudad, a la cual le pasamos el valor seleccionado en el combo de los continentes y el valor actual del combo de los países, que como acaba de ser cargado, será el primero de la lista.
En dicha función, tomamos al país equivalente a la opción seleccionada en el combo de los países (que al haber cargado recientemente, será el primero de la lista), dejo en blanco al combo de las ciudades (por si hubieron valores previamente) y procedo a llenarlo con las ciudades albergadas en el array del país equivalente a la opción seleccionada (o por defecto) del combo de los países.
Para que desde el inicio se realice el llenado de los combos de los países y ciudades, ejecutamos a la función
cambiaPais que es la que desencadenará el resto de acciones.
No olvides colocar este código justo antes de la etiqueta
</body> para que todo surta efecto, pues si lo colocaras en la cabecera (
<head>), primero cargaría el código JS y luego los elementos del DOM, con lo cual estos últimos nunca se verían afectados.
Saludos