<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
/* Ocultamos la lista de Provincias por ahora.. */
select[name=Noroeste],
select[name=Cuyo],
select[name=Litoral],
select[name=Centro],
select[name=Noreste],
select[name=Patagonia] {
display: none;
}
</style>
<script type="text/javascript">
window.onload = function() {
var region = document.getElementById("selectRegion");
// Nuestro valor anterior de Regiones (Noroeste, Cuyo, etc)
var selectProvinciaBefore = region.value;
// Cuando seleccionemos una region hacemos lo siguiente
region.addEventListener("change", function() {
// Obtenemos el nombre
var selectRegion = this.value;
// y seleccionamos segun corresponda la Region(id)
var selectProvincia = document.getElementById(selectRegion);
// Seleccionamos la Provincia anterior seleccionada y la ocultamos
var hidePreviousElement = document.getElementById(selectProvinciaBefore);
if (hidePreviousElement) {
hidePreviousElement.style.display = 'none';
};
// Mostramos la lista de Provincias segun la Region correspondiente
selectProvincia.style.display = 'inline';
// Guardamos el nombre de la Region actual
selectProvinciaBefore = selectRegion;
});
};
</script>
</head>
<body>
<h1>Listas</h1>
<form>
<label>Elija region:</label>
<select list="region" id="selectRegion">
<option selected="selected"></option>
<option value="Noroeste">Noroeste</option>
<option value="Cuyo">Cuyo</option>
<option value="Litoral">Litoral</option>
<option value="Centro">Centro</option>
<option value="Noreste">Noreste</option>
<option value="Patagonia">Patagonia</option>
</select>
<label>Elija Provincia:</label>
<select name="Noroeste" id="Noroeste">
<option value="provincia1">provincia1Noroeste</option>
<option value="provincia2">provincia2Noroeste</option>
<option value="provincia3">provincia3Noroeste</option>
</select>
<select name="Cuyo" id="Cuyo">
<option value="provincia1">provincia1Cuyo</option>
<option value="provincia2">provincia2Cuyo</option>
<option value="provincia3">provincia3Cuyo</option>
</select>
<select name="Litoral" id="Litoral">
<option value="provincia1">provincia1Litoral</option>
<option value="provincia2">provincia2Litoral</option>
<option value="provincia3">provincia3Litoral</option>
</select>
<select name="Centro" id="Centro">
<option value="provincia1">provincia1Centro</option>
<option value="provincia2">provincia2Centro</option>
<option value="provincia3">provincia3Centro</option>
</select>
<select name="Noreste" id="Noreste">
<option value="provincia1">provincia1Noreste</option>
<option value="provincia2">provincia2Noreste</option>
<option value="provincia3">provincia3Noreste</option>
</select>
<select name="Patagonia" id="Patagonia">
<option value="provincia1">provincia1Patagonia</option>
<option value="provincia2">provincia2Patagonia</option>
<option value="provincia3">provincia3Patagonia</option>
</select>
</form>
</body>
</html>