Cidades e Estados em Javascript

Uma das dúvidas mais comuns para quem está começando ajax é criar uma função que chame os estados e cidades nacionais. Sempre tenho que explicar uma serie de coisas como objeto httpRequest ou mesmo um mínimo de jQuery.

Pensando nos programadores do Brasil, desenvolvi este script de selects de estado e cidades do Brasil

Pensando nisso, resolvi escrever uma biblioteca que resolva este problema, além de estar disponível em uma única URL (JavaScript [bb] , hospedado pelo Google Code”>hospedado no google) no qual qualquer um pode utilizar. Assim, o usuário guarda em cache apenas um arquivo, e se o usuário passar em um site que chama a biblioteca, no próximo site que ele entrar e usar a biblioteca de novo, carregará o arquivo em cache e não precisará fazer o download de novo.

Outra vantagem é que o arquivo possui os estados e cidades no próprio core, assim não é necessário de interação com o servidor, o que deixa a resposta ao usuário mais rápida, deixando-o satisfeito. Ah, e sem falar que ele é crossbrowser e funciona com (ou sem) todas as bibliotecas conhecidas (como jQuery, prototype, dojo ou mootools) por trabalhar com apenas as funções que já existem no javascript.

Decidi hospedá-lo no servidor do google porque assim é mais improvável que hajam problemas de servidor em qualquer servidor que eu hospede. Para instalá-lo em seu site, coloque a seguinte instrução entre suas tags head.

1	<script type="text/javascript" src="http://cidades-estados-js.googlecode.com/files/cidades-estados-v0.2.js"></script>

Coloque este código (ou algo parecido) no seu html, para poder referenciar para a biblioteca.

1 2	Estado: <select id="estado" name="estado"></select> Cidade: <select id="cidade" name="cidade"></select>

A forma mais simples de ativar a biblioteca é esta, usando o objeto dgCidadesEstados passando os objetos que serão serão usados como select de estados e cidades respectivamente. Veja um exemplo.

1
2
3

window.onload = function() {
  new dgCidadesEstados(document.getElementById('estado'), document.getElementById('cidade'), true);
}

O projeto é opensource, então se sua cidade não está na biblioteca, por favor me informe que eu mesmo colocarei no projeto.

[update]

No total, são 5.560 cidades cadastradas na biblioteca, a diferença é que não está colocado cada um em uma linha (como em instruções SQL [bb] ) e sim cada estado em uma linha, o que diminui consideravelmente o tamanho do arquivo, se o seu Banco de Dados tiver mais que isso, por favor envie um comentário que procurarei atualizar o banco o mais breve possível.

[update 21/06/2009]

Vi que o pessoal está com dificuldades no retorno dos dados do servidor para o JavaScript, acontece que na versão encontrada no google code existiam exemplos e documentação necessário. Então decidi “puxar” essa informação para cá, afim de ajudar quem cai aqui de pará-quedas.

Recuperando os dados

Para fazer o sistema recuperar uma informação dada anteriormente, basta passar os parâmetros estadoValue e cidadeValue dentro do construtor.

new dgCidadesEstados({
  cidade: document.getElementById('cidade2'),
  estado: document.getElementById('estado2'),
  estadoVal: 'SP',
  cidadeVal: 'São Paulo'
});

Ou então passando como atributo value em sua tag select (ou input como descrito mais abaixo).

1 2	<select id="estado1" value="TO"></select> <select id="cidade1" value="Araguaína"></select>

new dgCidadesEstados({
  cidade: document.getElementById('cidade1'),
  estado: document.getElementById('estado1')
});

Obstrusividade?! Não!

Não é preciso que você escreva uma tag select, você pode executar usando um input que será substituido pelo select necessário. Para ativar esta opção, basta passar o parâmetro change.

1 2	<input type="text" name="estado3" id="estado3" value="MG" /> <input type="text" name="cidade3" id="cidade3" value="Viçosa" />

new dgCidadesEstados({
  cidade: document.getElementById('cidade3'),
  estado: document.getElementById('estado3'),
  change: true
});

Charset?!

Você não precisa se preocupar em codificação de caracteres, o cidades-estados-js é disponibilizado nas versões Latin (ANSII) e UTF-8. Para isso, basta alterar a forma como você chama a biblioteca.

1
2

<script type="text/javascript" src="http://cidades-estados-js.googlecode.com/files/cidades-estados-1.0-utf8.js"></script>
<script type="text/javascript" src="http://cidades-estados-js.googlecode.com/files/cidades-estados-1.0.js"></script>

Dê preferencia a usar o charset utf-8, mas se seu sistema não aceitar essa codificação ou você usa DreamWeaver? e nem sabe o que é isso, provavelmente você vai precisar da versão em ASCII. ;D

Nota: Vale a pena ler o artigo sobre intercacionalização de caracteres da w3c que explica mais sobre codificação, inclusive o utf-8.

Posted by DGmike at 2:10 pm on October 4th, 2008. 46 comments... »
Categories: eventos, javascript. Tags: ajax, biblioteca, cidades, estados, google, html, httpRequest, javascript, nacionais, opensource, xml.

46 comments.

cara… eu tenho uma base.. que diz ter todas as cidades do Brasil…. tem 5564…

se tiver interesse, dá um toque.

[]s

Posted by Danilo on October 4th, 2008.
Olá Danilo,

A base que eu estou usando é uma que encontrei disponivel na internet (google, é claro), mas não contei quantas cidades tinha mas acredito que esteja completa., se puder me passar, a comunidade agradece.

Posted by admin on October 5th, 2008.
[...] amigo DGMike publicou: Cidades e Estados em Javascript: Uma das dúvidas mais comuns para quem está começando ajax é criar uma função que chame os [...]

Posted by Client-side » Cidades e Estados em Javascript on October 6th, 2008.
[...] Veja a solução do cara lá no blog dele: Combo de estados e cidades em ajax by DGMike [...]

Posted by Combo de estados e cidades em ajax - Seus problemas acabaram » El Micox on October 6th, 2008.
Gostei!

Mas eu prefiro fazer isso pelo servidor, se o cliente tiver com o js desligado adeus formulário. [:)]

Posted by Leonardo A. Souza on October 6th, 2008.
@Leonardo A. Souza, todo mundo diz isso, e eu sei que é realmente
uma boa prática – fazer sites pensando em pessoas sem javascripts,
mas me responde umas coisas:

- qual a porcentagem de usuários que estão com o javascript desligado?

- você faz “pelo servidor” como? pq se vc filtrar seleção de cidades baseada na
escolha do estado, por uma combo, sem sair da página, obrigatóriamente
terá que usar javascript.

Ao DGmike, autor do projeto, parabéns!

Posted by Wilson on October 6th, 2008.
Tb acho que não tem todas as cidades, tb tenho em bd umas 5 mil cidades, se precisar dá um toque1

Posted by Ricardo on October 7th, 2008.
Oficialmente são 5564 (ou 5565?) cidades.. vou tentar descobrir as que faltam e te avisar.

Posted by Walter Rodrigo de Sá Cruz on October 7th, 2008.
Achei muito interessante isso, muito útil, parabéns!

Para o problema de acessibilidade no caso de javascript desligado, uma forma que vejo para solucionar isso é usar js para redirecionar links numa tela anterior. Se o js estiver habilitado ele direciona o link para um lugar a tela do ajax, senão, abre o link padrão para uma página que traz os dados do banco…

@Wilson, se nos preocuparmos apenas com números, faríamos apenas sites para o iE. Acho interessante pensar na minoria também.

Aquele abraço.

Posted by Eduardo Ottaviani on October 8th, 2008.

@leonardo, @Eduardo não havia pensado nessas pessoas há principio, mas nas próximas versões você poderá colocar os campos que deseja subtiruir, então poderá fazer campos text (ou mesmo divs inteiras com select e submit) que o dg-cidades-estados-js irá substituí-los por seus selects dinâmicos.

Logo, vocês poderão fazer assim*:

<form>
 
<fieldset id="fls_estado"><legend>Estado</legend>
<select name="estado">...</select>
<button type="submit" name="seleciona_estado"/>
</fieldset>
 
<fieldset id="fls_cidade" class="hide_if_not_seleciona_estado_post"><legend>Cidade</legend>
<select name="estado">...</select>
</fieldset>
 
</form>

* Isto é um html genérico, não considere se está bem escrito ou não, se é isso o que você usa ou não, é só um exemplo. Daí, a dinamica de como fazer isso fica por conta do seu PHP, ASP, Python, Ruby, Java, etc.

Farei o mesmo exemplo para scripts em linguagens server para fazer esse trabalho. Considero que é mais leve carregar dados de leitura na RAM do servidor (no mínimo são 2Gb de memória de um servidor báscio) do que fazer conexão com o Banco de Dados de forma criptografada para fazer uma consulta filtrada e só depois ter o resultado. Isso envolve uma coneção desnecessária gastando até mais memória, dependendo da situação. Por isso resolvi alocar na memória mesmo.

Posted by DGmike on October 8th, 2008.

Isso aí!

Na época que eu tinha feito isso eu usava uma página para o usuário escolher o estado, pegava os parâmetros da requisição e retornava a tela do estado com as cidades, para o caso de javascript desabilitado. Acho que na época eu nem usei Bd, se bem me lembro tinha organizado em arquivos separados em php rsrs.

Testei hoje só, muito rápido, postei no fórum, não tenha dúvidas de que vai ser muito aproveitado seu código.

Obrigado.

Posted by Eduardo Ottaviani on October 9th, 2008.
Existe uma versão do js que roda no servidor… então, pode ser feito é se o user não tiver o js ativado, vc da uma redirecionada para a pagina com js que roda no servidor, hj eu não sei o quanto essa alternativa é viavel, mas existe. Estou pensando em fazer meu TCC em acessibilidade ou em um “FrameWork”, em que te permita escrever js com mais conceitos de orientação a objetos, quem sabe uma fusão dos dois não seja uma boa idéai.

Posted by Édipo Costa on October 9th, 2008.
“Existe uma versão do js que roda no servidor” -> javascript rodando em servidor? Ué, não é client-side?

No mais, sensacional a idéia, Mike! Vou baixar e testar. Parabéns

Posted by Christian on October 9th, 2008.
@Édipo eu ainda não ouvi falar de js que roda no servidor, sei que chamar um script do servidor (PHP, ASP, Py, Rb) como se fosse um js e seu código gerado é interpretado pelo javascript. Infelizmente não é o caso pois o Google não me permite rodar programas lá (por enquanto).

@Christian A intenção não é baixar e usar no seu site, mas usar direto do servidor google:

[...] além de estar disponível em uma única URL (JavaScript, hospedado pelo Google Code”>hospedado no google) no qual qualquer um pode utilizar. Assim, o usuário guarda em cache apenas um arquivo, e se o usuário passar em um site que chama a biblioteca, no próximo site que ele entrar e usar a biblioteca de novo, carregará o arquivo em cache e não precisará fazer o download de novo.

Mesmo assim, obrigado! Espero que goste do resultado.

Posted by DGmike on October 9th, 2008.
Cara, muito bom.. mas testei no IE7 e deu um problema… o ultimo campo sempre é “undefined”.

Abraço

Posted by Felipe Morais on October 9th, 2008.
Mike, tudo joia?

Muito boa sua idéia, parabéns!
Ainda não tive oportunidade de usar, mas em breve usarei.

Tenho uma base de dados com 5577 cidades, um pouco maior que a sua, se tiver interesse posso te mandar.
Tenho vontade de fazer um script para pegar todas as cidades brasileiras no site do IBGE, da mesma forma que fiz para pegar todos os países do mundo em português, mas ultimamente falta tempo.

Abraços!
Muito Obrigado!

Posted by Alisson Patrício on October 23rd, 2008.
Como eu consigo obter um ID para adicionar no banco de dados da cidade selecionada??

Posted by Alex on October 25th, 2008.
Como eu faço pra puxar os dados do script e mostrar nos campos caso eu tenha q fazer alterações dos registros?

Posted by Amauri on November 6th, 2008.

Mais como eu implemento isso tudo na pagina HTML ?
essas partes do JS eu não entendi.

esse conteúdo aqui

window.onload = function() {
  new dgCidadesEstados(
    document.getElementById('estado'),
    document.getElementById('cidade')
  );
}

Onde ele entra em que lugar ???
e as atualizações ?

function $(elm){
  return document.getElementById(elm);
}function $(elm){
  return document.getElementById(elm);
}

Posted by Duhh on November 11th, 2008.

Me disculp, consegui resolver o problema acima. listou certinho, apenas com erros de acentuação agora nos nomes dos valores no campo.

preciso achar uma forma de eliminar agora isso.

Posted by Duhh on November 11th, 2008.
Parabens pela iniciativa de colocar essa funcionalidade num lugar publico e aberto para todos os desenvolvedores.

Gostaria de uma dica de como fazer para corrigir os erros de acentuções que aparecem ao executar o codigo.

aguardo um retorno

Abraços
Odair

Posted by Odair on November 13th, 2008.
Parabéns pela iniciativa. Para tentar deixá-la mais completa seria uma boa opção adicionar as mesorregioes de cada estado. Essa opção tem sido muito utilizada para definir em que parte do estado se localiza tal cidade. Como muitos de nossos estados sao maiores que muitos países as mesorregioes tem sido úteis para buscas por regiões. Vejas as mesorregioes de cada estado brasileiro em: http://pt.wikipedia.org/wiki/Categoria:Mesorregi%C3%B5es_do_Brasil. t++

Posted by Donsier on November 17th, 2008.
Pessoal,
não estou conseguindo fazer funcionar, não estou entendendo aonde tenho que colocar o terceiro passo:
1 2 3
window.onload = function() { new dgCidadesEstados(document.getElementById('estado'), document.getElementById('cidade'), true); }
Por favor, “desenhe” esse passo.

Abraços.

Posted by Junior on November 20th, 2008.

Coloca isso dentro do :

<script type="text/javascript">
window.onload = function() {
  new dgCidadesEstados(document.getElementById('estado'), document.getElementById('cidade'), true);
}
</script>

Coloca isso acima do BODY, tb dentro das :

1	<script type="text/javascript" src="cidades-estados-v0.2.js"></script>

Cria dois campos:

Estado: <select id="estado" name="estado">
 </select>
Cidade: <select id="cidade" name="cidade">
</select>

Resolvido o problema =)

Posted by Diego on December 1st, 2008.

Existe a versão 0.2 em utf8 ? Estou tendo problemas em utilizar a versão 1.0 utf8 por problemas com os métodos childNode e dispatchEvent.

Parabéns pela iniciativa, Abraços.

Posted by Eduardo Mucelli on January 7th, 2009.
Estou tendo problema em implementar o código no IE7, alguém teve algum problema desse tipo? Testei em outros browsers e tudo trancorreu bem, apenas o IE7 dá pau =/

Posted by Julian Andrade on January 8th, 2009.
Olá!

Utilizei este script para um teste no meu site e ao selecionar um estado, a ultima cidade que aparece é “undefined”.
Pode ser ao buscar as posições do vetor criado…
Abraço

Posted by Henrique on January 13th, 2009.
Uma ótima ideia, uma ideia boa seria portar para jQuery, porem isso já é outra historia ^^

Posted by Alessandro on January 28th, 2009.

addOption: function (elm, val, text) {
// to avoid IE undefineds values ----
  if (typeof text == 'undefined')  return;
// to avoid IE undefineds values ----
    var opt = document.createElement('option');
    opt.appendChild(document.createTextNode(text));
    opt.value = val;
    elm.appendChild(opt);
  },

Posted by Grato on March 5th, 2009.

Grato, onde eu coloco esse código para não aparecer undefined?

Posted by Fariaslima on April 3rd, 2009.
Amigo, se os dados do estado vier automaticamente via ajax por uma busca por cep… tem como eu fazer a cidade parecer também automatico?

Obrigado desde já!

Posted by Eder on April 7th, 2009.
showwwwwwwwwwwwwww valeu…

Posted by Dimas on May 5th, 2009.
A solução é ótima. Parabéns!

Acho que você poderia disponibilizar também uma opção com as cidades brasileiras e de Portugal juntas (como se Portugal fosse um estado). Se quiser, tenho uma lista das cidades.

Isso permitiria o cadastro dos portugueses.

Posted by Raquel on May 7th, 2009.
Muito obrigado por compartilhar isto conosco, o sistema ficou ótimo, carrega muito rápido !

Posted by Éder Rocha Bezerra on May 18th, 2009.
Prezado amigo, preciso de uma ajuda urgente, estou com um problema gigante, meu formulario funcionava muito bem até eu querer buscar no banco dados sem recarregar a pagina, agora a uf carrega certo mas a cidade nao tem jeito, nao consigo fazer funcinar, por favor me passe se telefone ou me de uma luz para esclarecer esta duvida

Posted by sandro on May 28th, 2009.
Eu quero saber como faço quando for editar, pra eu já trazer a cidade e o estado selecionado…

Posted by Walfredo de Sá on June 3rd, 2009.
Eu Também gostaria de saber como carregar novamento o estado e a cidade que já foi cadastrado no banco de dados ?

Obrigado

Posted by Edmilson on June 19th, 2009.
Olá,
Surpreendente; Testei e até o momento funcionou certinho.
Parabêns cara…

Posted by kacyn on July 8th, 2009.
O código é o dos ’s com cidades e estados.

Preciso mudar ele para que quando não tenha nenhum estado/cidade selecionado, apareça como “Qualquer estado” ou “Qualquer cidade”. É necessária essa mudança, pois meu site tem um sistema de buscas.

Quando tentei adaptar seu código, deu certo em um aspecto, sendo este:
Os valores aparentes mudaram para “Qualquer estado” e “Qualquer cidade”.

O que deu errado:
O de cidades não carrega antes do usuário selecionar um estado. Gostaria que carregasse por estética e facilidade de compreensão por parte do usuário.
Ao carregar a página, aparece por alguns instantes “Selecionar estado” ao invés de “Qualquer estado”.

Obrigado desde já, seu script é muito bom!

Posted by Rafael Junqueira on July 28th, 2009.
Corrigindo o post anterior, pois coloquei tags html sem querer:
O código é o dos select’s com cidades e estados.

Preciso mudar ele para que quando não tenha nenhum estado/cidade selecionado, apareça como “Qualquer estado” ou “Qualquer cidade”. É necessária essa mudança, pois meu site tem um sistema de buscas.

Quando tentei adaptar seu código, deu certo em um aspecto, sendo este:
Os valores aparentes mudaram para “Qualquer estado” e “Qualquer cidade”.

O que deu errado:
O select de cidades não carrega antes do usuário selecionar um estado. Gostaria que carregasse por estética e facilidade de compreensão por parte do usuário.
Ao carregar a página, aparece por alguns instantes “Selecionar estado” ao invés de “Qualquer estado”.

Estou te mandando minha adaptação.

Obrigado desde já, seu script é muito bom!

Posted by Rafael Junqueira on July 28th, 2009.
Olá! Parabéns pela iniciativa, muito boa a idéia mesmo, porém a última versão (1.0) está com algum problema quando se tenta usar window.onload no estado.childNode. Talvez seja eu que não tenha conseguido utilizar direito, mas pelos testes que fiz não funcionou. Só funcionou chamando a função no meio do código HTML. Se o amigo puder ver isso, no mais também irei dar uma olhada aqui e se achar a solução posto aqui .

Abraço

Posted by Alexander Fiabane do Rego on October 4th, 2009.
Nossa , estava andando na net pra encontrar isso faz tempo.. e agora tudo resolvido, pô show de bola mesmo cara.!!!

Posted by betaurus on November 3rd, 2009.
Quando executei o script com ie estava dando erro.

para solucionar declarei a variavel

var item;

for (item in defaultData) {
if (!data[item]) {
data[item] = defaultData[item];
}
}

funcionou na boa…

Posted by Wallace Camacho on November 4th, 2009.
Boa tarde senhores,

gostaria de saber uma dica para fazer uma combo País/Estado/Cidade

att.
Vitor Odenor Aquino da Silva

Posted by Vitor Odenor Aquino da Silva on December 11th, 2009.
Estou colacando o código em uma aplicação em cakephp. Na view add, funciona uma beleza. Mas, na view edit, não estou conseguindo retornar os dados do bando de dados. Se eu uso estadoVal ou cidadeVal, funciona. Tem como jogar o valor de uma variável nestes dois campos?

Posted by Elias Gomes on December 12th, 2009.
Amigo, dica Perfeita , Abraços

Posted by Julio on January 15th, 2010.

DGmike