Cidades e Estados em Javascript

KaKarotto · Outubro 9, 2008

Cidades e Estados em Javascript.

Lendo o ClientSide, acabei sendo direcionado para um blog onde o autor comenta uma solução que ele criou para popular os campos select de cidades de acordo com o estado selecionado. Ele hospedou no google para maior confiança de uso de sua api. Achei muito interessante e quem quiser pode ler mais sobre isso no blog dele.

Vou só dar o gosto do doce rsrs:

<script type="text/javascript" src="http://cidades-estados-js.googlecode.com/files/cidades-estados-v0.2.js"></script> 
<script type="text/javascript">
    window.onload = function() {
        new dgCidadesEstados( 
            document.getElementById('estado'), 
            document.getElementById('cidade'), 
            true
        );
    }
</script>

<body>
	<form>
		<fieldset>
			<label>Estado</label>:<select id="estado" name="estado"></select> 
			<label>Cidade</label>:<select id="cidade" name="cidade"></select> 
		</fieldset>
	</form>
</body>

Só isso rsrsrs....

Fonte : DGMike

Url: http://dgmike.com.br/2008/10/cidades-e-est...cript/#comments

'ary · Novembro 13, 2008

Muito bom.. obrigada pela dica.. funciona perfeito! :D

Ðä20wëb · Fevereiro 27, 2009

Muito boa essa dica, já usei e já toh passando à diante!

Carlos Rocha · Março 3, 2009

Nesse caso basta baixar com o enderço do src o arquivbo js dele e usar com o mesmo script.

Erik100 · Junho 13, 2009

Cara eu adorei o código, mas eu preciso de uma ajuda eu to fazendo um formulário de cadastro que necessita do código acima, mas eu preciso fazer o seguinte no formulário existem dois campos que seriam:

"Cidade e Estado de Origem"

e outro campo com

"Cidade e Estado de Destino"

Será que alguém consegue me ajudar para modificar o código acima para a minha necessidade?

Fico no aguardo e agradeço se alguém puder me ajudar.... Valeu.....

KaKarotto · Junho 13, 2009

Não entendi a dúvida.

Erik100 · Junho 13, 2009

O que eu preciso é do seguinte:

<body>
<form>
<fieldset>
<label>Estado de Origem</label>:<select id="estado" name="estado"></select><br><br>
<label>Cidade de Origem</label>:<select id="cidade" name="cidade"></select>
</fieldset>
<br>
<fieldset>
<label>Estado de Destino</label>:<select id="estado1" name="estado1"></select><br><br>
<label>Cidade de Destino</label>:<select id="cidade1" name="cidade1"></select>
</fieldset>
</form>
</body>

Eu preciso de 2 campos de Estado e 2 campos de Cidade mas não estou conseguindo????

Jonathan Queiroz · Junho 13, 2009

Nesse caso basta utilizar o código referenciando os dois campos

new dgCidadesEstados( 
            document.getElementById('estado'), 
            document.getElementById('cidade'), 
            true
        );
new dgCidadesEstados( 
            document.getElementById('estado1'), 
            document.getElementById('cidade1'), 
            true
        );

Erik100 · Junho 13, 2009

Jonathan Queiroz veio valeu mesmo.... agora o código tá funcionando que é uma beleza.....

Abraços e T+....

Thais TA · Janeiro 26, 2011

O codigo funciona perfeitamente!

Mas gostaria de saber como faço para linkar as cidades!

Por exeplo: A Pessoa clica em são Paulo e abre Santo Andre, em Santo Andre ele linka para uma pagina onde contem algumas informaçoes de SAnto Andre!

Me ajude por favor!

KaKarotto · Janeiro 30, 2011

Thaís, é só adicionar mais eventos ao select de cidade.

var cidade = document.getElementById('select-cidade')
var change = cidade.onchange || function(){}
cidade.onchange = function(){
change.call(this)
location.href = 'pagina.htm?cidade=' + this.options[this.selectedIndex].value
}

Tipo isso, se usa jQuery fica bem mais bonito o código, porque não utilizei addEventListener ali...

[]'s

Thais TA · Fevereiro 2, 2011

Thaís, é só adicionar mais eventos ao select de cidade.
var cidade = document.getElementById('select-cidade')
var change = cidade.onchange || function(){}
cidade.onchange = function(){
change.call(this)
location.href = 'pagina.htm?cidade=' + this.options[this.selectedIndex].value
}
Tipo isso, se usa jQuery fica bem mais bonito o código, porque não utilizei addEventListener ali... []'s

KaKarotto, Obrigado pela dica! Mas não consegui! Coloquei esse codigo no arquivo js, mudei o location.href "minhapagina.html" e "cidadequeabriraapagina"

var cidade = document.getElementById('select-cidade')
var change = cidade.onchange || function(){}
cidade.onchange = function(){
change.call(this)
location.href = 'minhapagina.html?cidadequeabriraapagina=' + this.options[this.selectedIndex].value
}

Mas na hora que abro a pagina para selecionar o estado e a cidade não carrega o js! :unsure: Este é o conteudo do js que estou usando:

window.onDomReady = function dgDomReady(fn){
    if(document.addEventListener)    //W3C
        document.addEventListener("DOMContentLoaded", fn, false);
    else //IE
        document.onreadystatechange = function(){dgReadyState(fn);}
}

function dgReadyState(fn){ //dom is ready for interaction (IE)
    if(document.readyState == "interactive") fn();
}

/* Objeto */
dgCidadesEstados = function(cidade,estado,init) {
  this.set(cidade,estado);
  if (init) this.start();
}

dgCidadesEstados.prototype = {
  estado: document.createElement('select'),
  cidade: document.createElement('select'),
  set: function(estado, cidade) {
    this.estado=estado;
    this.estado.dgCidadesEstados=this
    this.cidade=cidade;
    this.estado.onchange=function(){this.dgCidadesEstados.run()};
  },
  run: function () {
    var sel = this.estado.options.selectedIndex;
    var itens = this.cidades[sel];
    var itens_total = itens.length;
    var opts = this.cidade;
    while (opts.childNodes.length)
      opts.removeChild(opts.firstChild);
    this.addOption(opts, '', 'Selecione uma cidade');
    for (var i=0;i<itens_total;i++)
      this.addOption(opts, itens[i], itens[i]);
  },
  start: function () {
    var estado = this.estado
    while (estado.childNodes.length)
      estado.removeChild(estado.firstChild);
    for (var i=0;i<this.estados.length;i++)
      this.addOption(estado, this.estados[i][0], this.estados[i][1]);
  },
  addOption: function (elm, val, text) {
    var opt = document.createElement('option');
    opt.appendChild(document.createTextNode(text));
    opt.value = val;
    elm.appendChild(opt);
  },
  estados : [
    ['','Selecione um estado'],['ES','Espírito Santo'],['MG','Minas Gerais'],
    ['MS','Mato Grosso do Sul'],
    ['PR','Paraná'],['RJ','Rio de Janeiro'],['RS','Rio Grande do Sul'],
    ['SC','Santa Catarina'],['SP','São Paulo'],
  ],
  cidades : [[
   
    ], ['Vitória',                                                                             <<<<<<<<<<
    ], ['Belo Horizonte',                                                                 <<<<<<<<<< 
    ], ['Campo Grande',                                                                <<<<<<<<<<
    ], ['Curitiba','Jacarezinho','Londrina',                                        <<<<<<<<<<
    ], ['Rio de Janeiro',                                                                 <<<<<<<<<<  Gostaria de linkar essas cidades!
    ], ['Cachoeirinha','Canoas','Porto Alegre',                                 <<<<<<<<<<
    ], ['Araranguá','Blumenau','Içara','Joinville','São José',               <<<<<<<<<<
    ], ['Leme','Marilia','Piracicaba','São Paulo',                                 <<<<<<<<<<
    
    ]
  ]
};

o que devo fazer?

Editado Fevereiro 7, 2011 por Thais TA

KaKarotto · Fevereiro 9, 2011

Cara Thaís, eu fiz um exemplo aqui pra vc, dá uma olhada:

index.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
    </head>
    <body>
    
        <select id="estado"></select>
        <select id="cidade"></select>
    
        <script type="text/javascript" src="http://cidades-estados-js.googlecode.com/files/cidades-estados-v0.2.js"></script> 
        <script type="text/javascript">
            window.onload = function() {
                
                var estado = document.getElementById('estado')
                var cidade = document.getElementById('cidade')
                
                new dgCidadesEstados( estado, cidade, true )
                
                cidade.onchange = function(){
                    location.href = 'cidade.htm#cidade=' + cidade.value
                }
                
            }
        </script>
    </body>
</html>

cidade.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
    </head>
    <body>
        <script type="text/javascript">
            window.onload = function() {
                
                var hash = location.hash.match(/\w*=(.*)/)
                alert(hash.pop())
                
            }
        </script>
    </body>
</html>

Tem que pegar o valor passado pela querystring na sua página cidade.htm. Há duas formas de se passar variáveis de uma página à outra, por cookies ou por querystrings.

Neste exemplo utilizei querystrings. Usei regex para pegar o valor da cidade, mas existe aqui no fórum na sessão de scripts prontos uma função para pegar valores de querystrings.

[]'s

Thais TA · Fevereiro 9, 2011

Cara Thaís, eu fiz um exemplo aqui pra vc, dá uma olhada:

index.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
    </head>
    <body>
    
        <select id="estado"></select>
        <select id="cidade"></select>
    
        &lt;script type="text/javascript" src="http://cidades-estados-js.googlecode.com/files/cidades-estados-v0.2.js"></script> 
        &lt;script type="text/javascript">
            window.onload = function() {
                
                var estado = document.getElementById('estado')
                var cidade = document.getElementById('cidade')
                
                new dgCidadesEstados( estado, cidade, true )
                
                cidade.onchange = function(){
                    location.href = 'cidade.htm#cidade=' + cidade.value
                }
                
            }
        </script>
    </body>
</html>

cidade.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
    </head>
    <body>
        &lt;script type="text/javascript">
            window.onload = function() {
                
                var hash = location.hash.match(/\w*=(.*)/)
                alert(hash.pop())
                
            }
        </script>
    </body>
</html>

Tem que pegar o valor passado pela querystring na sua página cidade.htm. Há duas formas de se passar variáveis de uma página à outra, por cookies ou por querystrings.

Neste exemplo utilizei querystrings. Usei regex para pegar o valor da cidade, mas existe aqui no fórum na sessão de scripts prontos uma função para pegar valores de querystrings.

[]'s

Kakarotto

Mais uma vez te agradeço pela atençao e paciencia!

Sou novata em web e agora complicou um pouco mais!

Teria como eu linkar as cidades abrindo uma janela em blank popup para as cidades especificas?

Tem que pegar o valor passado pela querystring na sua página cidade.htm??????????????? :unsure:

Nesse caso ele busca somente uma pagina a cidade.htm!

não estou conseguindo que cada cidade abra uma pagina especifica!

Editado Fevereiro 9, 2011 por Thais TA

KaKarotto · Fevereiro 13, 2011

Thaís tudo bem?

A minha intenção não era complicar rsrs.

Vou tentar responder de acordo com o que eu entendi suas perguntas.

Teria como eu linkar as cidades abrindo uma janela em blank popup para as cidades especificas?

Teria. Eu dei apenas um exemplo, abrindo na mesma tela. Você pode usar o window.open para abrir o endereço em uma janela pop up.

Tem que pegar o valor passado pela querystring na sua página cidade.htm???????????????

Tem, caso sua página for igual para todas as cidades e apenas algumas coisas forem dinamicas. O ideal na verdade é que seja uma página para todas as cidades e fazer as suas diferenças nela, através de alguma linguagem de servidor, como php, java, .net etc.

Nesse caso ele busca somente uma pagina a cidade.htm!
não estou conseguindo que cada cidade abra uma pagina especifica!

Eu não sei se entendi direito o que você quer com essa página específica.

Eu entendi que você tem tipo várias páginas html, tipo saopaulo.html, riodejaneiro.html etc... o que é uma besteira, mas caso tenha feito dessa forma, basta usar a variavel que guarda o valor do select que o usuário escolheu para direcionar o gaiato para onde você quer.

var de_para = {
    'Viçosa' :'vicosa',
    'São Paulo':'saopaulo'
    //Etc
}

cidade.onchange = function(){
    var valor = cidade.value
        valor = de_para[ valor ]
    window.open( valor+'.htm' ,'_blank' )
}

Usei aquele json "de_para" porque sua página html não tem acentos e espaços. O json seria enorme para todas as cidades que existem, então uma solução bem mais elegante seria usar regex para tirar espaços em branco e acentos do valor da cidade...

Mas vai complicar mais e não tenho certeza de que entendi direito o que pretende fazer...

Se tiver a sua aplicação rolando em alguma url, passa por que daí dá pra ter uma idéia melhor do que pretende fazer.

Pra mim está muito abstrato.

[]´s

Thais TA · Fevereiro 14, 2011

KaKarotto!

MUITO OBRIGADO POR TER ME AJUDADO!

Funcionou muito bem! Mas tem um pequeno probleminha!

Na ultima linha das cidades tem escrito undefined! Pode me ajudar quanto a isso?

GRATA

THAIS

Editado Abril 28, 2011 por Thais TA

julio_alvez · Agosto 15, 2011

como faço para aparecer o bairro, depois que ele escolheu o estado e a cidade?

Marcos Guiga · Setembro 23, 2011

Tem como adicirnar novas cidade?

mptecrs · Setembro 6, 2014

Olá pessoal, beleza?

Galera eu estou tentando salvar no banco de dados os itens selecionados, mas não ta salvando

Detalhe eu estou usando o joomla 2.5.24 e seblod 3.2.2.

Criei um cadastro de usuários e adicionei 2 campos do tipo select dinâmico e no over ride eu estou passando a função java script para chamar os estados e cidades, até ai beleza ta funcionando.

Mas quando eu clico em salvar ele salva todas as outras informações, exceto o estado selecionado e a cidade selecionada.

Alguém tem uma dica ai?

Obrigado dez de já.

Editado Julho 15, 2023 por mptecrs

Entrar

Cidades e Estados em Javascript

Pergunta

Link para o comentário

Compartilhar em outros sites

18 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns