下拉列表的触发更改事件

Question

我有3个下拉框。国家，州，城市。当用户选择Country时，它将从数据库中获取状态详细信息并将其添加到状态下拉框中。同样适用于City。

这是我正在使用的代码。

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

这是JS部分。

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

它工作正常，没有错误/问题。

我有另一个PHP文件，我使用相同的代码。在该文件中，我以json格式从数据库中获取数据，我想在下拉框中显示它们。我检查了Firebug，发现数据来自数据库。

这是代码。

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

                                }

问题是国家正在显示，但州和城市框显示选择状态和选择城市。好像数据没有显示在选择框中。

编辑

样本数据

编辑2

如果我在这样的状态下添加警报。

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

然后我在状态框中获取数据。

Answer 1

如果您的状态是作为JSON对象进入的，则必须执行以下操作：

 $(".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);
   } 
   });
  });

城市也是如此：

$(".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);
   } 
   });
  });