不使用 jQuery,只使用 Javascript。
我想根据第一个选择的值添加第二个选择的选项。第一个select选择我们要处理的省份,根据我们选择的省份自动,第二个select(城镇)加载数据。
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>
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);
});
}
}
我怎样才能使它在选择一个省时自动加载该省的城镇?
一种可能的解决方案是将各省作为物业存储在一个物体中,将城镇在数组中作为价值存储,并且在选择省时,我们将其数组打印为Select“ Town”的选项:
我已删除您的评论,以便您更好地识别我的评论。
首先,我不知道用省份加载第一个选择的功能是否适合您,我将方法放在
cargarProvincias()
页面加载后立即执行:现在,要加载该省的城镇,
onchange
请在选择中添加一个事件:所以我所做的是,每次更改省时,调用方法
cargarPueblos
并传递value
所选选项之一。它会是这样的。在 arraySelected 中放置您选择的数组,您必须基于您传递给方法的值。