Populating selects of cities and states with AJAX (PHP and jQuery Mobile)

Question

I’m riding a webapp with the Jquery Mobile, PHP and AJAX framework.

In this app I have a form with selects of ESTADO and CIDADE, was made an AJAX that when selects the ESTADO, carries the CIDADES according to STATE.

The problem I’m having, and that AJAX only loads the first time, and then no more after selecting the ESTADO for the second time or more.

 <script type="text/javascript">
        $(document).ready(function(){
            $('#estados').change(function(){
                alert ('carrega cidade');
                $('#cidades').load('cidades.php?estado='+$('#estados').val() );

            });
        });

    </script>

<select name="estados" id="estados">
    <option value="0">ESTADO</option>
    <?php
        mysql_connect('localhost','root','');
        mysql_selectdb('proxima-corrida');

       $result = mysql_query("select * from proxc_estado");

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

       }

    ?>
</select>


<select name="cidades" id="cidades">
    <option value="0">Escolha um estado</option>
</select>

<?php

    $idestado = $_GET['estado'];

    mysql_connect('localhost','root','');
    mysql_selectdb('proxima-corrida');

   $result = mysql_query("SELECT * FROM proxc_cidade WHERE estado_cidade = ".$idestado);

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

   }

?>

Answer 1

I made an example not to depend on programming, only javascript. The file with the cities and states are in https://api.myjson.com/bins/enzld. A query will be made in this file and then populated the other fields. The javascript file I believe is very simple, any question ask that I can explain to you the items that do not understand.

In your case, you can generate this listing as JSON via PHP or even consume a static file like this one from the example.

var estados = [];

function loadEstados(element) {
  if (estados.length > 0) {
    putEstados(element);
    $(element).removeAttr('disabled');
  } else {
    $.ajax({
      url: 'https://api.myjson.com/bins/enzld',
      method: 'get',
      dataType: 'json',
      beforeSend: function() {
        $(element).html('<option>Carregando...</option>');
      }
    }).done(function(response) {
      estados = response.estados;
      putEstados(element);
      $(element).removeAttr('disabled');
    });
  }
}

function putEstados(element) {

  var label = $(element).data('label');
  label = label ? label : 'Estado';

  var options = '<option value="">' + label + '</option>';
  for (var i in estados) {
    var estado = estados[i];
    options += '<option value="' + estado.sigla + '">' + estado.nome + '</option>';
  }

  $(element).html(options);
}

function loadCidades(element, estado_sigla) {
  if (estados.length > 0) {
    putCidades(element, estado_sigla);
    $(element).removeAttr('disabled');
  } else {
    $.ajax({
      url: theme_url + '/assets/json/estados.json',
      method: 'get',
      dataType: 'json',
      beforeSend: function() {
        $(element).html('<option>Carregando...</option>');
      }
    }).done(function(response) {
      estados = response.estados;
      putCidades(element, estado_sigla);
      $(element).removeAttr('disabled');
    });
  }
}

function putCidades(element, estado_sigla) {
  var label = $(element).data('label');
  label = label ? label : 'Cidade';

  var options = '<option value="">' + label + '</option>';
  for (var i in estados) {
    var estado = estados[i];
    if (estado.sigla != estado_sigla)
      continue;
    for (var j in estado.cidades) {
      var cidade = estado.cidades[j];
      options += '<option value="' + cidade + '">' + cidade + '</option>';
    }
  }
  $(element).html(options);
}

document.addEventListener('DOMContentLoaded', function() {
  loadEstados('#uf');
  $(document).on('change', '#uf', function(e) {
    var target = $(this).data('target');
    if (target) {
      loadCidades(target, $(this).val());
    }
  });
}, false);

<div>
  <label for="uf" class="input-label">Estado</label>
  <select name="uf" id="uf" disabled data-target="#cidade">
        <option value="">Estado</option>
    </select>
</div>

<div>
  <label for="cidade" class="input-label">Cidade</label>
  <select name="cidade" id="cidade" disabled>
        <option value="">Cidade</option>
    </select>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 2

For jQuery ajax to be loaded every time, you can use Jquery delegate method, example:

$(function() {
  $(document).delegate('#estados', 'change', function() {
    var valor = $('#estados').val();
    $('#cidades').load('cidades.php?estado=' + valor );
   });
 });