Bueno, la idea es la siguiente. Imagino que siendo universitario captarás la idea rápidamente. Además de que imagino que si te han dejado este trabajo es por que previamente te dieron el conocimiento necesario para llevarlo a cabo. De cualquier modo y sin más rollo, aquí va la idea general:
Lo primero que harías es asignar una función al evento change de tu primera lista,
Esta función detecta que valor está seleccionado en la lista y saca los datos que han sido previamente guardados en un objeto.
Luego con un loop recorres cada uno de los datos y los vas agregando a la segunda lista.
Eso es todo. Aquí un poco de pseudo código:
Código Javascript
:
Ver originalvar paises = {
venezuela : ['Estado 1', 'Estado 2', 'Estado 3', 'Mas estados'],
japon : ['Estado 1', 'Estado 2', 'Estado 3', 'Mas estados'],
mexico : ['Estado 1', 'Estado 2', 'Estado 3', 'Mas estados'],
usa : ['Estado 1', 'Estado 2', 'Estado 3', 'Mas estados'],
brazil : ['Estado 1', 'Estado 2', 'Estado 3', 'Mas estados'],
}
var miLista1 = document.getElementById('myLista1');
var miLista2 = document.getElementById('myLista2');
miLista1.onchange = function(){
var v = this.value;
if(paises[v]){
miLista2.innerHTML = '';
for(var i = 0; paises[v][i]; i++){
miLista2.innerHTML += '<option value="">' + paises[v][i] + '</option>';
}
}
}
Para eso tus lista uno tendria opciones como esta:
<option value="japon">Japon</option>
Eso no fue realmente pseudo código, pero no lo he probado. Es solo la forma en que puedes empezar. Creo que de ahí ya puedes resolverlo solo.