city state Jquery error in selection

Question

Jquery:

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

  $(document).delegate('#cidade', 'change', function() {
    var valor = $('#cidade').val();
    alert(valor);
    $('#bairro').load('_requires/bairros.php?cidade=' + valor );
   });

 });

HTML:

<div>
   <label class="labelPequena">Estado</label><br />
   <select class="typeTextMedio" id="estado" name="estado" required>
      <option value="">Escolha o Estado</option>
      <option value="MG">MG</option>
      <option value="ES">ES</option>
      <option value="RJ">RJ</option>
      <option value="SP">SP</option>         
   </select>
</div>

<div>
   <label class="labelPequena">Cidade</label><br />
   <select class="typeTextMedio" id="cidade" name="cidade" required>
      <option value="">Escolha a Cidade</option>         
   </select>
</div>

<div>
   <label class="labelPequena">Bairro</label><br />
   <select class="typeTextMedio" id="bairro" name="bairro" required>
     <option value="#">Indiferente</option>

   </select>
</div>

When selecting in the combo estados, popular the combo cidades. This is working.

When selecting in the combo cidades, popular the combo bairro. This is NOT working. But I noticed that in combo cidades only occurs the ERROR with the first city only and when I click on it, the event does not occur. With the others usually occurs.

An important observation is that if choosing second city of combo, and the combo of the neighborhoods is loaded, then go back and select the first city again, then now it works. On the first try nor the alert works!

How to solve?

Answer 1

The problem is occurring because Voce is not returning together with the results of the cities the option Choose the City. This way the first city comes by default as selected but without activating the combo change.

Another way to solve the problem is to change the javascript combo code #Status to:

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

 });

Note that Trigger will invoke the change event in the #city combo.