Ir para conteúdo
Fórum Script Brasil
  • 0

Cidades e Estados em Javascript


KaKarotto

Pergunta

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

Link para o comentário
Compartilhar em outros sites

18 respostass a esta questão

Posts Recomendados

  • 0

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.....

Link para o comentário
Compartilhar em outros sites

  • 0

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????

Link para o comentário
Compartilhar em outros sites

  • 0

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
        );

Link para o comentário
Compartilhar em outros sites

  • 0

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

Link para o comentário
Compartilhar em outros sites

  • 0
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 por Thais TA
Link para o comentário
Compartilhar em outros sites

  • 0

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

Link para o comentário
Compartilhar em outros sites

  • 0
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 por Thais TA
Link para o comentário
Compartilhar em outros sites

  • 0

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

Link para o comentário
Compartilhar em outros sites

  • 0

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 por mptecrs
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...