Página Inicial > JavaScript, Outros > Selecionando cidades dependendo dos estados (sem AJAX)

Selecionando cidades dependendo dos estados (sem AJAX)

Primeiro, desculpa pelo código ok? estou tentando trabalhar nisso, deixa-lo um pouco mais legivel.

Mas é isso ai galera, um jeitinho simples inteligente de carregar cidades depois de selecionar os estados, e sem usar AJAX.
A idéia principal, é usar um popup, passando o como parametro o estado selecionado, e neste popup, carregamos as cidades do estado passado. Para retornar o valor do estado, usamos o window.opener, e tcharããããã.
Mas vamos por partes certo!

Primeiramente vamos construir nosso formulario bem simples:

<script language="javascript">
   cidades = function(obj) {
      var filha = window.open(
            "cidades.php?id_estado=" + document.getElementById("sel_estado").value,
            "_blank",
            "height=300, width=200, resizable=no, scrollbars=no"
      );
   }
</script>
 
<form action="acao.php" method="post">

   <span>Estado</span>

   <select name="sel_estado" id="sel_estado">
      <option value="0">SP</option>
      <option value="1">MS</option>
   </select>

   

   <span>Cidade</span>

   <input type="text" id="txt_cidade" onclick="cidades(this)" />
   <input type="hidden" id="hid_cidade" name="hid_cidade" />

</form>

 

Depois de termos nosso formulario, criamos nosso popup:

<script language="javascript">
   escolher_cidade = function(code, name) {
      window.opener.document.getElementById("hid_cidade").value = code;
      window.opener.document.getElementById("txt_cidade").value = name;
      window.close();
   }
</script>
 
<?php
   // Vetor de cidades
   // $cidades[0] = SP
   $cidades[0][0] = "Andradina";
   $cidades[0][1] = "Adamantina";
   $cidades[0][2] = "São Paulo";
   $cidades[0][3] = "Araçatuba";
   $cidades[0][4] = "Bauru";
   // $cidades[0] = MS
   $cidades[1][0] = "3 Lagoas";
   $cidades[1][1] = "Campo Grande";
   $cidades[1][2] = "Dourados";
   $cidades[1][3] = "Itaporã";
   
   // Mostra as cidades
   foreach($cidades[$_GET["id_estado"]] as $key => $cidade) {
      echo "<div style=\"cursor:pointer;\" onclick=\"escolher_cidade(" . $key . ", '" . $cidade . "')\">" . $cidade . "</div>";
   }
?>
 

Nesta parte, você pode manter uma tabela no banco, e listar as cidades apartir dela.

um exemplo deste script pode ser visto aqui

  1. Nenhum comentário ainda.
  1. Nenhum trackback ainda.