Sin utilizar jQuery, solamente Javascript.
Deseo agregar las opciones del segundo select dependiendo del valor que tome el primer select. El primer select elige la provincia de la que queremos tratar, y automáticamente dependiendo de la provincia que elijamos, se carga de datos el segundo select (pueblos).
Código HTML:
<tr>
<td align=right>Provincia:</td>
<td align=left colspan=3>
<select name="provincia" id="provincia">
<option value="cargar_provincias();">Seleccione una Provincia...
</select>
</td>
</tr>
<tr>
<!-- Extra: Cargar pueblos a partir de una provincia -->
<td align=right>Pueblo:</td>
<td align=left colspan=3>
<select name="pueblo" id="pueblo">
<option value="cargar_pueblos();">Seleccione un Pueblo...
</select>
</td>
</tr>
Código Javascript:
//Función para cargar las provincias al campo "select".
function cargarProvincias() {
//Inicializamos el array.
var array = ["Cantabria", "Asturias", "Galicia", "Andalucia", "Extremadura"];
//Ordena el array alfabeticamente.
array.sort();
//Pasamos a la funcion addOptions(el ID del select, las provincias cargadas en el array).
addOptions("provincia", array);
}
//Función para agregar opciones a un <select>.
function addOptions(domElement, array) {
var selector = document.getElementsByName(domElement)[0];
//Recorremos el array.
for (provincia in array) {
var opcion = document.createElement("option");
opcion.text = array[provincia];
selector.add(opcion);
}
}
//Función para cargar los pueblos al campo "select" dependiendo de la provincia elegida.
function cargarPueblos() {
//Objeto de provincias con los pueblos correspondientes.
var listaPueblos = {
cantabria: ["Laredo", "Gama", "Solares", "Castillo", "Santander"],
asturias: ["Langreo", "Villaviciosa", "Oviedo", "Gijon", "Covadonga"],
galicia: ["Tui", "Cambados", "Redondella", "Porriño", "Ogrove"],
andalucia: ["Dos Hermanas", "Écija", "Algeciras", "Marbella", "Sevilla"],
extremadura: ["Caceres", "Badajoz", "Plasencia", "Zafra", "Merida"]
}
//Declaramos un array donde guardamos todos los elementos de tipo id=provincias e id=pueblos.
var provincias = document.getElementById('provincia');
var pueblos = document.getElementById('pueblo');
//Tomamos como provinciaSeleccionada, el valor del id provincia (var provincias).
var provinciaSeleccionada = provincias.value;
//Se limpian los pueblos.
pueblos.innerHTML = '<option value="">Seleccione un Pueblo...</option>'
//Si existe provinciaSeleccionada...
if(provinciaSeleccionada !== ""){
//Se seleccionan los pueblos y se ordenan.
provinciaSeleccionada = listaPueblos[provinciaSeleccionada];
provinciaSeleccionada.sort();
//Insertamos los pueblos mediante un FOR.
provinciaSeleccionada.forEach(function(pueblo){
var opcion = document.createElement('option');
opcion.value = pueblo;
opcion.text = pueblo;
pueblos.add(opcion);
});
}
}
¿Cómo puedo hacer para que al elegir una provincia automáticamente se carguen los pueblos de esa provincia?