Многомерный Javascript в HTML-форме
Я хотел бы вставить многомерный массив в Javascript в два разных элемента select в форме HTML.
1. HTML
<select class = "formDepartamento" id = "depertamentoId" name = "departamento">
<option value = "" disabled selected>Departamento</option>
</select>
<select class = "formLocalidad" id = "localidadId" name = "localidad">
<option value = "" disabled selected>Localidad</option>
</select>
2.Javascript
var selecDepartamento = document.getElementById("depertamentoId");
var selecLocalidad = document.getElementById("localidadId");
var dptosLocs = {
"Rio de Janeiro": ["Rio de Janeiro", "Seropedica"],
"Bahia": ["Salvador", "Morro de Sao Paulo"],
"Sao Paulo": ["Montevideo"],
"Curitiba": ["Salto", "Daymán", "Arapey"]
}
for(var i = 0; i < dptosLocs[i].length; i++) {
for(var z = 0; z < dptosLocs.length; z++) {
console.info(dptosLocs[z][i]);
}
}
Вот jsfiddle:
https://jsfiddle.net/pemagalhaesrj/r4ah87ze/5/
Что я ожидаю
Установите «выбирает» в соответствии со структурой массива.
"formDepartament" для Рио-де-Жанейро, Баии, Сан-Паулу и Куритибы и "formLocalidad" для заполнения «Рио-де-Жанейро», «Серопедика», «Сальвадор», «Морро-де-Сан-Паулу» и т. д.
Хорошо, обновлено. Сожалею.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Может быть, это то, что вам нужно? Не уверен, но возможно.
Редактировать - Основные изменения. Я считаю, что это именно то, что вам нужно сейчас, и также вижу ответ Джермы Винсмок.
var selecDepartamento = document.getElementById("depertamentoId");
var selecLocalidad = document.getElementById("localidadId");
var dptosLocs = {
"Rio de Janeiro": ["Rio de Janeiro", "Seropedica"],
"Bahia": ["Salvador", "Morro de Sao Paulo"],
"Sao Paulo": ["Montevideo"],
"Curitiba": ["Salto", "Daymán", "Arapey"]
}
// called when the city has been selected
function cityChange(e) {
// first, clear the options, incase of a change
selecLocalidad.innerHTML = '<option value = "" disabled selected>Localidad</option>';
// add the options based on the selected city
if (e.target.value) {
var i, opt;
for(i=0;i<dptosLocs[e.target.value].length;i++) {
opt = document.createElement("option");
opt.value = dptosLocs[e.target.value][i];
opt.textContent = dptosLocs[e.target.value][i];
selecLocalidad.appendChild(opt);
}
}
}
// do the work once the page has loaded
window.onload = function() {
var city, i, opt;
for(city in dptosLocs) {
opt = document.createElement("option");
opt.value = city;
opt.textContent = city;
selecDepartamento.appendChild(opt);
}
// add a listener
selecDepartamento.addEventListener('change',cityChange,false);
}<select class = "formDepartamento" id = "depertamentoId" name = "departamento">
<option value = "" disabled selected>Departamento</option>
</select>
<select class = "formLocalidad" id = "localidadId" name = "localidad">
<option value = "" disabled selected>Localidad</option>
</select>Почти готово! Проблема в том, что localidadId должен быть обусловлен тем, какой depertamentoId выбирает клиент. Например, если вы выбрали Рио де Жанейро, опция должна быть только "Рио де Жанейро" и "Серопедика".
@ P.Magalhaes: См. Обновленный ответ. Я уверен, что это то, что вам нужно.
Большое спасибо! Это лучший класс на свете. Задача решена.
@Tigger, спасибо за кредит! Я поддержал ответ.
Благодаря ответу Тигра ваша проблема была решена. Поскольку ваш второй раскрывающийся список зависел от первого, поэтому с помощью event.target.value значение первого раскрывающегося списка было сохранено в переменной города, и с этим был заполнен второй раскрывающийся список. Для каждого нового значения в первом раскрывающемся списке второе раскрывающееся меню должно изменяться, поэтому при каждом вызове функции changed() второе раскрывающееся меню сначала очищается с помощью selecLocalidad.innerHTML = "";.
<select class = "formDepartamento" id = "depertamentoId" name = "departamento" onchange = "changed()">
<option value = "" disabled selected>Departamento</option>
</select>
<select class = "formLocalidad" id = "localidadId" name = "localidad">
<option value = "" disabled selected>Localidad</option>
</select>
<script>
var selecDepartamento = document.getElementById("depertamentoId");
var selecLocalidad = document.getElementById("localidadId");
var dptosLocs = {
"Rio de Janeiro": ["Rio de Janeiro", "Seropedica"],
"Bahia": ["Salvador", "Morro de Sao Paulo"],
"Sao Paulo": ["Montevideo"],
"Curitiba": ["Salto", "Daymán", "Arapey"]
}
var city, i, opt, opt2;
for (city in dptosLocs) {
opt = document.createElement("option");
opt.value = city;
opt.textContent = city;
selecDepartamento.appendChild(opt);
}
function changed(selecDepartamento) {
city = event.target.value;
selecLocalidad.innerHTML = "";
for (i = 0; i < dptosLocs[city].length; i++) {
opt2 = document.createElement("option");
opt2.value = dptosLocs[city][i];
opt2.textContent = dptosLocs[city][i];
selecLocalidad.appendChild(opt2);
}
}
</script>
Совершенно не ясно, каким должен быть ваш конечный результат на основе информации в вашем вопросе. Хотите обновить вопрос, чтобы показать ожидаемый результат?