4 select o listas dependientes

[anitasonrics]

Iniciado por angsanchez

Lo he ampliado a tres niveles, se vuelve un poco complejo pero es cuestión de seguir la norma.
(Con los datos que tiene funciona sólo para España y Francia).

Código HTML:

<script>
var paises = new Array()
paises[1] = ["elige país...","España","Francia","Alemania"]
paises[2] = ["elige país...","China","Japón","India"]
paises[3] = ["elige país...","Argentina","Chile","Colombia"]

var provincias = new Array()
provincias[1] = new Array()
provincias[1][1] = ["elige provincia","Madrid","Valladolid"]
provincias[1][2] = ["elige provincia","Côtes du Rhone",".."]

function ponPaises(formu)
{	var elConti = formu.conti.selectedIndex
	formu.pais.length = paises[elConti].length
	for (i=0; i<formu.pais.length; i++)
	{	formu.pais.options[i].text = paises[elConti][i]
	}
}
function ponProvincias(formu)
{	var elConti = formu.conti.selectedIndex
	var elPais = formu.pais.selectedIndex
	formu.provincia.length = provincias[elConti][elPais].length
	for (i=0; i<formu.provincia.length; i++)
	{	formu.provincia.options[i].text = provincias[elConti][elPais][i]
	}
}
</script>
<form>
<select name="conti" onChange="ponPaises(this.form)">
<option selected>elige continente...</option>
<option>Europa</option>
<option>Asia</option>
<option>América</option>
</select>
<select name="pais" onChange="ponProvincias(this.form)">
<option></option>
</select>
<select name="provincia">
<option></option>
</select>
</form> 

No me funciona este código, y no sé porqué es.
Solo me muestra las opciones del primer select y en el segundo y tercer select no me muestra nada.