Array associative State and City Combobox in Javascript

Question

Array associative State and City Combobox in Javascript

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

2

I'm trying to set up this associative array, in case the combobox is the state of São Paulo, you have to show 5 cities in São Paulo, if it's Rio de Janeiro, it shows the 5 cities of Rio de Janeiro.

HTML

<select id = "estados">
    <option></option>
</select>

<select id = "cidade">  
    <option></option>
</select>

Javascript

var select = document.getElementById("estados"); 
var cidade = document.getElementById("cidade"); 
var options = ["São Paulo", "Rio de Janeiro"]; 
var cidade1 = ["São Paulo", "Itápolis", "Araraquara", "Ribeirão Preto", "Jacareí"];
var cidade2 = ["Rio de Janeiro", "Niteroi", "Petropolis", "Belford Roxo", "Nova Iguaçu"];

In the following code it brings all states, so far so good.

for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    //console.log(el)
    select.appendChild(el);
}

Perfectly returning states in the combobox. What I want now is that when I select the state show the cities in the other combobox, when Rio shows the cities of Rio and when Select Sao Paulo shows the cities of São Paulo. So I did this, but it does not return anything

Javascript

if(select){

    var t = document.getElementById("estados");
    var selectedText = t.options[t.selectedIndex].text;

    if(selectedText == 'São Paulo'){
        for(var j = 0; j < cidade1.length; j++) {
            var opt = cidade1[j];
            var el = document.createElement("option");
            el.textContent = opt;
            el.value = opt;
            cidade.appendChild(el);
        }   
    }

    if(selectedText == 'Rio de Janeiro'){
        for(var j = 0; j < cidade2.length; j++) {
            var opt = cidade2[j];
            var el = document.createElement("option");
            el.textContent = opt;
            el.value = opt;
            cidade.appendChild(el);
        }   
    }

}

I took the select variable, if it exists it enters the if, but the variable selectedText that I did to receive the value of the combobox of the state it returns empty. Before I had left inside the for, there I repeated the empty field 5 times, I took from inside for it it repeats once but still yes empty.

Thanks in advance for any help.

javascript html combobox array-associativo

asked by anonymous 15.05.2017 / 20:58

3 answers

1

Example

Javascript

var options = {
            "São Paulo" : ["São Paulo", "Itápolis", "Araraquara", "Ribeirão Preto", "Jacareí"], 
            "Rio de Janeiro":  ["Rio de Janeiro", "Niteroi", "Petropolis", "Belford Roxo", "Nova Iguaçu"]
        }; 

        var load= function(){
                var estados = document.getElementById("estados"); 
                var chaves = Object.keys(options);

                for(var i = 0; i < chaves.length; i++) {
                    var opt = chaves[i];
                    var el = document.createElement("option");
                    el.textContent = opt;
                    el.value = opt;
                    estados.appendChild(el);
                }
        }


        var setCidades = function (){
                var estados = document.getElementById("estados"); 
                var estado = estados.options[estados.selectedIndex].value;
                var cidades = options[estado];


                var cidade = document.getElementById("cidade");

                for(var i = 0; i < cidades.length; i++) {
                    var el = document.createElement("option");
                    el.textContent = cidades[i];
                    el.value =  cidades[i];
                    cidade.appendChild(el);
                }

        }

And in HTML:

<body onload="load();">
    estado
    <select id = "estados" onchange="setCidades(); return false;">
    </select>

    <br>

    cidade
    <select id = "cidade" >  
    </select>
</body>

15.05.2017 / 21:26

1

You need to associate the state change with an event. The way you are doing it is taking the first option (which is blank) and trying to load the cities, which will never work. If you want to see this, just take the empty options in HTML:

<select id = "estados">

</select>

<select id = "cidade">  

</select>

Now, to solve your problem that is click and change, you will need to give a function that makes this change whenever the combo box undergoes change, something like this:

In HTML add onchange="myFunction ()", which will call the function myFunction whenever any state is selected

<select id = "estados" onchange="myFunction()">
    <option></option>
</select>

<select id = "cidade">  
    <option></option>
</select>

In the function, place your code that was already ready:

myFunction  = function (){
    if(select){
      cidade.innerHTML = "";
      var t = document.getElementById("estados");
      var selectedText = t.options[t.selectedIndex].text;

      if(selectedText == 'São Paulo'){
          for(var j = 0; j < cidade1.length; j++) {
              var opt = cidade1[j];
              var el = document.createElement("option");
              el.textContent = opt;
              el.value = opt;
              cidade.appendChild(el);
          }   
      }

      if(selectedText == 'Rio de Janeiro'){
          for(var j = 0; j < cidade2.length; j++) {
              var opt = cidade2[j];
              var el = document.createElement("option");
              el.textContent = opt;
              el.value = opt;
              cidade.appendChild(el);
          }   
      }
  }
}

Here's the complete example link

15.05.2017 / 21:41

Put social media buttons on the site How to represent algorithm in C for Pseudocode?

score 2 · Accepted Answer

Two suggestions:

create a function to be able to reuse code
creates an object where keys are the names of states, so everything is organized and dependent on the JSON framework

So JSON can grow and have N states / cities without needing to tinker with the code.

var select = document.getElementById("estados");
var cidade = document.getElementById("cidade");
var cidades = {
  "São Paulo": ["São Paulo", "Itápolis", "Araraquara", "Ribeirão Preto", "Jacareí"],
  "Rio de Janeiro": ["Rio de Janeiro", "Niteroi", "Petropolis", "Belford Roxo", "Nova Iguaçu"]
};

function adicionarOptions(select, options, chosen) {
  while (select.children.length > 0) {
    // esvaziar o select
    select.removeChild(select.firstChild);
  }
  for (var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
  }
  // Juntei um 3o argumento para selecionar alguma option. 
  // Se não houver o select inicia sem pré-seleção
  select.value = chosen || '';
}

var estados = Object.keys(cidades);
adicionarOptions(select, estados, estados[0]);
select.addEventListener('change', function() {
  adicionarOptions(cidade, cidades[this.value])
})

<select id="estados">
    <option></option>
</select>

<select id="cidade">  
    <option></option>
</select>