Populating city and state selects with AJAX (PHP and jQuery Mobile) [duplicate]

Question

Populating city and state selects with AJAX (PHP and jQuery Mobile) [duplicate]

Navigation

#1 by (4 votes)
#2 by (0 votes)

6

I'm building a webapp with the framework JQuery Mobile, PHP and AJAX.

In this app I have a form with selects of ESTADO and CIDADE , an AJAX has been done that when it chooses ESTADO , it loads CIDADES according to STATE

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

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

   }

?>

php javascript jquery ajax jquery-mobile

asked by anonymous 19.06.2015 / 22:24

2 answers

PHP - Concurrent user control? EntityFramework 6 + LazyLoadingEnabled + using ()

score 4 · Answer 1

I made an example not to depend on programming, just javascript. The file with cities and states are at link . A query will be made in this file and then the other fields populated. The file in javascript I believe is very simple, any doubt ask that I can explain the items you do not understand.

In your case, you can generate this listing as JSON via PHP or even consume a static file like this 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>

score 0 · Answer 2

In order for the jQuery ajax to be loaded every time, you can use the delegate method of JQuery, for example:

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