Jump to content
Fórum Script Brasil
  • 0
Sign in to follow this  
KaKarotto

Cidades e Estados em Javascript

Question

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

Share this post


Link to post
Share on other sites

18 answers to this question

Recommended Posts

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

Share this post


Link to post
Share on other sites
  • 0

Não entendi a dúvida.

Share this post


Link to post
Share on other 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????

Share this post


Link to post
Share on other 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
        );

Share this post


Link to post
Share on other sites
  • 0

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!

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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?

Edited by Thais TA

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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!

Edited by Thais TA

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other sites
  • 0

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

Edited by Thais TA

Share this post


Link to post
Share on other 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á.

Meu e-mail é [email protected]

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

Cloud Computing


  • Forum Statistics

    • Total Topics
      148139
    • Total Posts
      643455
×
×
  • Create New...