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>