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, 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) 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.
1 2 3 4 5 6 | 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> |
1 2 3 4 | 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" /> |
1 2 3 4 5 | 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.
cara… eu tenho uma base.. que diz ter todas as cidades do Brasil…. tem 5564…
se tiver interesse, dá um toque.
[]s
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.
[...] 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 [...]
[...] Veja a solução do cara lá no blog dele: Combo de estados e cidades em ajax by DGMike [...]
Gostei!
Mas eu prefiro fazer isso pelo servidor, se o cliente tiver com o js desligado adeus formulário. [:)]
@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!
Tb acho que não tem todas as cidades, tb tenho em bd umas 5 mil cidades, se precisar dá um toque1
Oficialmente são 5564 (ou 5565?) cidades.. vou tentar descobrir as que faltam e te avisar.
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.
@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*:
* 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.
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.
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.
“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
@É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:
Mesmo assim, obrigado!
Espero que goste do resultado.
Cara, muito bom.. mas testei no IE7 e deu um problema… o ultimo campo sempre é “undefined”.
Abraço
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!
Como eu consigo obter um ID para adicionar no banco de dados da cidade selecionada??
Como eu faço pra puxar os dados do script e mostrar nos campos caso eu tenha q fazer alterações dos registros?
Mais como eu implemento isso tudo na pagina HTML ?
essas partes do JS eu não entendi.
esse conteúdo aqui
Onde ele entra em que lugar ???
e as atualizações ?
?
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.
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
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++
Pessoal,
não estou conseguindo fazer funcionar, não estou entendendo aonde tenho que colocar o terceiro passo:
Por favor, “desenhe” esse passo.
Abraços.
Coloca isso dentro do :
Coloca isso acima do BODY, tb dentro das :
Cria dois campos:
Resolvido o problema =)
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.
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 =/
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
Uma ótima ideia, uma ideia boa seria portar para jQuery, porem isso já é outra historia ^^
Grato, onde eu coloco esse código para não aparecer undefined?
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á!
showwwwwwwwwwwwwww valeu…
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.
Muito obrigado por compartilhar isto conosco, o sistema ficou ótimo, carrega muito rápido !
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
Eu quero saber como faço quando for editar, pra eu já trazer a cidade e o estado selecionado…
Eu Também gostaria de saber como carregar novamento o estado e a cidade que já foi cadastrado no banco de dados ?
Obrigado