Javascript Multidimension in HTML Form

Question

I would like to insert an multidimension array in Javascript into a two different selects elements in HTML form.

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]);
 }
}

Here is the jsfiddle:

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

What I expect

Set the "selects" according to the structure of the array.

"formDepartament" for Rio de Janeiro, Bahia, Sao Paulo and Curitiba and "formLocalidad" to fill "Rio de Janeiro", "Seropedica, "Salvador", "Morro de Sao Paulo", etc...

It is not clear at all what your end result should be based on the information in your question. Feel like updating the question to show the expected output? — Tigger, Sep 02 '18 at 07:20

Tigger · Accepted Answer · 2018-09-03T10:59:00.387

Could this be what you are after? I'm not sure it is, but maybe.

Edit - Major changes. I believe this is what you are after now and also see Germa Vinsmoke's answer as well.

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>

Almost there! The problem is **localidadId** must be conditioned what **depertamentoId** the client choose. For example, If you chose **Rio de Janeiro**, the option must be only **"Rio de Janeiro"** and **"Seropedica"**. — Pedro Magalhaes, Sep 02 '18 at 16:29
@P.Magalhaes : See updated answer. Pretty sure this is what you are after. — Tigger, Sep 03 '18 at 11:01

Germa Vinsmoke · Answer 2 · 2018-09-03T10:50:21.240

Thanks to Tigger's answer, your problem was solved. Since your second dropdown list was depended on first one, so with the help of event.target.value the value of first dropdown was stored in city variable and with that, second dropdown list was populated. For every new value in first dropdown, second dropdown should change so for that, whenever changed() function is called, second dropdown is first cleared out using 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>

How do I clear all options in a dropdown box?

Javascript Multidimension in HTML Form

2 Answers2