using Ajax to seek state - city

Question

I need to create a conbobox of state and cities. According to the selected state, the corresponding cities are displayed.

<select name="estados" id="estados">
<option value="0">Selecione o estado</option>
    <?php
       $result = mysql_query("select distinct loc_uf from local ORDER BY loc_uf ASC");
       while($row = mysql_fetch_array($result) )
       {
            echo "<option value='".$row['id_pais']."'>".$row['loc_uf']."</option>";
       }
    ?>

<select name="cidades" id="cidades">
<option value="">Selecione a cidade</option>
      //como usar ajax e buscar cidade de acordo com estado selecionado??
</select>

table

name: local

fields:

id_local
loc_cidade
loc_uf

Answer 1

First, let’s go to the code of the page where the droplists meet:

State droplist code

<select name="estados" id="estados">
    <option value="0">Selecione o estado</option>
    <?php
       $result = mysql_query("select distinct loc_uf from local ORDER BY loc_uf ASC");
       while($row = mysql_fetch_array($result) )
       {
            echo "<option value='".$row['loc_uf']."'>".$row['loc_uf']."</option>";
       }
    ?>
</select>

On this same page, the code of the city droplist:

<select name="cidades" id="cidades">
    <font id="font_cidades"></font>
</select>

Still on this page, the code to search cities with AJAX. For this page, I also used Jquery.

<script type="text/javascript">

    $('#estados').change(
        function() {
            var estado = $('#estado').val(); //Pegando o id do estado
            $.ajax({
                type: "GET",  
                url: "AJAX_buscaCidades.php?estado="+estado,
                success: function(data) {
                    $('#font_cidades').html(data); //Se obtivermos sucesso na busca dos dados, atribuímos os dados para o select
                }
            });
        }
    );

</script>

And finally, let’s go to the Ajax_buscacidades.php file, which will fetch the cities when the state id is provided.

<?php

    $sqlQuery = "select distinct loc_cidade from local WHERE loc_uf = " . $_GET['estado'] . " ORDER BY loc_cidade ASC";

    $result = mysql_query();
    while($row = mysql_fetch_array($result)){
        echo "<option value='".$row['loc_cidade']."'>".$row['loc_cidade']."</option>";
    }

?>

Some considerations:

• The code is still raw, you need to make changes to queries, fields, etc.
• I suggest using MYSQLI to make queries more safely.

Enjoy!