Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde a todos !
Fiz um pequeno código em Javascript, onde a pessoa em uma comobox o Estado e na outro comobox já aprece as Cidades relacionadas no Estado escolhido. Só que por exemplo: Quando escolho uma Estado Rio de Janeiro ou qualquer outro sendo a primeira vez, ele traz as cidades direitinho... Mas quando vou fazer de novo, escolher outro estado por exemplo São Paulo, ele traz as cidades de São e junto as cidades da primeira seleção que fiz ou seja, as cidades do Rio de Janeiro. Onde posso estar errado? Faltando alguma coisa no código? Segue o código:
Fico no aguardo da ajuda. Obrigado.
<script>
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"],
"Santa Catarina" : ["Joinville", "Florianópolis", "Blumenau", "Criciúma", "Chapecó"]
};
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);
}
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body onload="load();">
Escolha o Estado
<select id = "estados" onchange="setCidades(); return false;">
</select>
<br>
Escolha a Cidade
<select id = "cidade" >
</select>
</body>
</html>Olá Marcos ! Obrigado pela dica. Mas fiz isso... e continua do mesmo jeito. Segue o código: Será que fiz no luar certo? Desculpe a minha ignorância !!!
<script>
var setCidades = function (){
var estados = document.getElementById("estados");
var estado = estados.options[estados.selectedIndex].value;
var cidades = options[estado];
var cidade = document.getElementById("cidade");
}
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"],
"Santa Catarina" : ["Joinville", "Florianópolis", "Blumenau", "Criciúma", "Chapecó"]
};@Fernando Melo
<!DOCTYPE html>
<html lang="pt-BR" dir="ltr">
<script>
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"],
"Santa Catarina" : ["Joinville", "Florianópolis", "Blumenau", "Criciúma", "Chapecó"]
};
var load= function(){
var estados = document.getElementById("estados");
var chaves = Object.keys(options);
var l = document.createElement("option");
l.textContent = 'Escolha um estado';
l.value = null;
estados.appendChild(l);
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");
cidade.innerHTML='';
if(cidades){
for(var i = 0; i < cidades.length; i++) {
var el = document.createElement("option");
el.textContent = cidades[i];
el.value = cidades[i];
cidade.appendChild(el);
}
}
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body onload="load();">
Escolha o Estado
<select id="estados" onchange="setCidades(); return false;">
</select>
<br>
Escolha a Cidade
<select id="cidade" >
</select>
</body>
</html>Boa tarde Marcos! Muito obrigado.... agora deu certo. Só mais uma questão:
Existe a possibilidade de que quando a pessoa escolhe por exemplo o Estado: São Paulo e depois a Cidade por exemplo Ribeirão Preto ai abre uma página com informações dessa cidade? Ou um botão que depois que escolher as opções no Comobox a pessoa clica no botão e acessa a página relativa a sua escolha? Da para fazer isso com Javascript?
Mais uma vez obrigado pela solução anterior!
Abraços
sim tem como sim quando eu tive um tempinho livre,vou tentar fazer mais e a mesma logica. so fazer duas vezes
@Fernando Mello
Ver se isso lhe ajuda: https://github.com/robertocr/cidades-estados-js
Esse javascript faz justamente isso, se bem que acho que você está tentando se basear nisso...
tenta limpa antes de adiciona os options