Validation of two selects

Question

Validation of two selects

Navigation

#1 by (3 votes)

1

I have two fields select , one I have states and another cities. I need to select in a select a state, eg: São Paulo and in the other select only bring the cities of são paulo.

javascript html jquery

asked by anonymous 28.10.2016 / 19:41

1 answer

What is and what is the service fabric Split "100000000000" in JQUERY [closed]

score 3 · Accepted Answer

Starting from the principle that you will be working with JSON type data, but can be in any format ... you can get the onchange event in select states, and apply a filter in the city vector, searching for cities that have the selected state. Something like this:

var arrayDeCidades = [
  {"nome":"Bauru", "estado":"sp" },
  {"nome":"Ourinhos", "estado":"sp" },
  {"nome":"Curitiba", "estado":"pr" }
];

document.getElementById("estados").onchange = function(){
  var selCidades = document.getElementById("cidades");
  selCidades.innerHTML = "";
  var cidadesFiltradas = arrayDeCidades.filter(cidade =>{
    return cidade.estado == this.value;
  });
  cidadesFiltradas.forEach(cidade =>{
    var optionInc = document.createElement("OPTION");
    optionInc.innerHTML = cidade.nome;
    selCidades.appendChild(optionInc);
  });
  
}

Estado:
<select id="estados">
  <option>Selecione</option>
  <option value="sp">São Paulo</option>
  <option value="pr">Paraná</option>
</select>

Cidade:
<select id="cidades">

</select>

The way you will load the state combo and the data source of cities depends on your database (SQL, Ws that returns a JSON, I do not know).