Trigger change event of dropdown

Question

I have 3 drop down box. Country, State, City. When user select Country then it will fetch state details from database and add them in state dropdown box. Same will apply for City.

Here is the code which I am using.

<div>
<label>Country :</label> 
<select name="country" id="country" class="country">
<option selected="selected">--Select Country--</option>
<?php
 $stmt = $DB_con->prepare("SELECT * FROM tbl_country");
 $stmt->execute();
 while($row=$stmt->fetch(PDO::FETCH_ASSOC))
 {
  ?>
        <option value="<?php echo $row['country_id']; ?>"><?php echo $row['country_name']; ?></option>
        <?php
 } 
?>
</select>

<label>State :</label> <select name="state" id="state" class="state">
<option selected="selected">--Select State--</option>
</select>


<label>City :</label> <select name="city" id="city" class="city">
<option selected="selected">--Select City--</option>
</select>

</div>

Here is the JS part.

<script type="text/javascript">
$(document).ready(function()
{
 $(".country").change(function()
 {
  var id=$(this).val();
  var dataString = 'id='+ id;

  $.ajax
  ({
   type: "POST",
   url: "get_state.php",
   data: dataString,
   cache: false,
   success: function(html)
   {
      $(".state").html(html);
   } 
   });
  });


 $(".state").change(function()
 {
  var id=$(this).val();
  var dataString = 'id='+ id;

  $.ajax
  ({
   type: "POST",
   url: "get_city.php",
   data: dataString,
   cache: false,
   success: function(html)
   {
    $(".city").html(html);
   } 
   });
  });

});
</script>

It is working fine with no errors/issues.

I have another PHP file where I am using the same code. In that file I am fetching the data from database in json format and I want to show them in dropdown box. I checked in Firebug and found data is coming from database.

Here is the code.

 for (i = 0; i < data.country.length; i++) { 
                                    j=i+1;
                                    $('#country'+j).val(data.country[i].id).change();   

                                }
                              for (i = 0; i < data.state.length; i++) { 
                                    j=i+1;
                                    $('#state'+j).val(data.state[i].id).change();   

                                }
                               for (i = 0; i < data.city.length; i++) { 
                                    j=i+1;
                                    $('#city'+j).val(data.city[i].id);   

                                }

The problem is country is showing properly but state and city boxes are showing select state and select city. It seems like data is not showing in the select box.

Edit

Sample data

Edit 2

If I add alert in state like this.

for (i = 0; i < data.state.length; i++) { 
    j=i+1;
         alert(data.state[i].id);   
                   $('#state'+j).val(data.state[i].id).change();   
    }

Then I am getting the data in state box.

Answer 1

If your states are coming in as JSON objects you have to do something like this:

 $(".country").change(function()
 {
  var id=$(this).val();
  var dataString = 'id='+ id;

  $.ajax
  ({
   type: "POST",
   url: "get_state.php",
   data: dataString,
   cache: false,
   success: function(data)
   {
      $(".state option").remove();
      $(".state").append('<option value="">--Select State--</option>');
      for (var i=0; i < data.state.length; i++) {
          $(".state").append('<option value="' + data.state[i].id + '">' + data.state[i].text + '</option>');
      }

      // if you know what state needs to be selected then you can implement that next
      // $(".state").val(theTextOfTheState);
   } 
   });
  });

Same thing for the Cities:

$(".state").change(function()
 {
  var id=$(this).val();
  var dataString = 'id='+ id;

  $.ajax
  ({
   type: "POST",
   url: "get_city.php",
   data: dataString,
   cache: false,
   success: function(data)
   {
      $(".city option").remove();
      $(".city").append('<option value="">--Select City--</option>');
      for (var i=0; i < data.city.length; i++) {
          $(".city").append('<option value="' + data.city[i].id + '">' + data.city[i].text + '</option>');
      }

      // if you know what city needs to be selected then you can implement that next
      // $(".city").val(theTextOfTheCity);
   } 
   });
  });