Javascript Многомерный в HTML-форме

Question

Я хотел бы вставить многомерный массив в 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.log(dptosLocs[z][i]);
 }
}

Вот jsfiddle:

https://jsfiddle.net/pemagalhaesrj/r4ah87ze/5/

Что я ожидаю

Установить «выбор» в соответствии со структурой массива.

"formDepartament" для Рио-де-Жанейро, Баии, Сан-Паулу и Куритибы и "formLocalidad" для заполнения "Рио-де-Жанейро", "Серопедика", "Сальвадор", "Морро-де-Сан-Паулу" и т. Д ...

Answer 1

Благодаря ответу Тигра ваша проблема была решена. Поскольку ваш второй раскрывающийся список зависел от первого, то с помощью event.target.value значение первого раскрывающегося списка сохранялось в переменной city, и вместе с этим заполнялся второй раскрывающийся список. Для каждого нового значения в первом раскрывающемся списке второе раскрывающееся меню должно меняться, поэтому при каждом вызове функции 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>

Как очистить все параметры в раскрывающемся списке?

Answer 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>