Hola, he estado haciendo un ejemplo de lo que pides, usando la API DOM para javascript, aunque también podría hacerse programando el formulario con javascript de forma tradicional, o leyendo los datos desde XML usando p.ej PHP y las API's DOM o SAX de XML para PHP. De hecho, con XML sería mucho más cómodo, y seguro que puedes conseguir documentos XML con los datos completos de países y sus correspondientes estados, provincias, etc).
El problema de mi solución es que
funciona perfectamente en Firefox, pero no en IE7 
. No tengo ni idea de por qué.
Alguien sabría decirme por qué? Si alguien supiera decírmelo se lo agradecería mucho.
El código es este:
Código HTML:
<html>
<head>
<title>Selects dinamicos</title>
</head>
<body onload="poblar(0)">
<script type="text/javascript">
pais1 = new Array('Madrid', 'Catalunya', 'Aragón', 'Comunidad Valenciana', 'Asturias')
pais2 = new Array('California', 'New York', 'Florida', 'Texas', 'Ohio')
paises = new Array(pais1, pais2)
function poblar(indicePais) {
// Obtener referencia a formulario
miForm = document.getElementById('miForm')
// En caso de haber ya un select estado, borrarlo para crear el nuevo
if (estado = document.getElementById('estado')) {
miForm.removeChild(estado)
}
// Crear el nuevo select para el estado/provincia
estado = document.createElement('select')
estado.setAttribute('id', 'estado')
estado.setAttribute('name', 'estado')
miForm.appendChild(estado)
// poblar el select estado con las opciones que toquen (estados, provincias, etc)
for (var i = 0; i < paises[indicePais].length; i++) {
opcion = document.createElement('option')
texto = document.createTextNode(paises[indicePais][i])
opcion.appendChild(texto)
estado.appendChild(opcion)
}
}
// Función llamada por el manejador de eventos onchange del select pais. Se invoca cada vez que se cambia la opción
function cambiar(seleccion) {
var opcionElegida = seleccion.selectedIndex
poblar(opcionElegida)
}
</script>
<form action="" method="get" name="miForm" id="miForm">
<label>
<select name="pais" id="pais" onchange="cambiar(this)">
<option selected="selected">España</option>
<option>Estados Unidos</option>
</select>
</label>
</form>
</body>
</html> El error que me da IE7 está en la primera línea de la función
poblar():
miForm = document.getElementById('miForm')
Error:
El objeto no acepta esta propiedad o método.