觸發下拉菜單的更改事件

Question

我有3個下拉框。 國家，州，城市。 當用戶選擇國家時，它將從數據庫中獲取狀態詳細信息，並將其添加到狀態下拉框中。 同樣適用於城市。

這是我正在使用的代碼。

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