1
I have two camps select
, I have states and other cities. I need to select in a select
one state, ex: São Paulo and the other select
bring only the cities of Sao Paulo.
1
I have two camps select
, I have states and other cities. I need to select in a select
one state, ex: São Paulo and the other select
bring only the cities of Sao Paulo.
3
Starting from the principle that you will be working with JSON type data, but it can be in any format... you can get the event onchange
in the select
of states, and implement 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 origin of the city data depends on your database (SQL, Ws that returns a JSON, I do not know).
Browser other questions tagged javascript jquery html
You are not signed in. Login or sign up in order to post.
You already have the database of states and cities ?
– Mauro Alexandre
and what did you try to do? show your code so we can help you.
– Ricardo Pontual
There are several questions here on
stackoverflow PT
addressing this topic... you have some mechanism ofback-end
? Where do you save the values of cities and states? Do you have any table with the relations? Which database?– Marllon Nasser