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.