ドロップダウンの変更イベントが発生する

Question

ドロップダウンボックスが3つあります。国、州、市。ユーザーがCountryを選択すると、データベースから状態の詳細を取得し、状態のドロップダウンボックスに追加します。同じことが市にも適用されます。

ここに私が使用しているコードがあります。

<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形式のデータベースからデータを取得しています。そのデータをドロップダウンボックスに表示します。 ファイアバグをチェックしたところ、データベースからデータが取得されています。

ここにコードがあります。

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

           } 

問題は国が正しく表示されていますが、州と市のボックスが選択状態を示していて都市を選択しています。選択ボックスにデータが表示されていないようです。

私の質問はかなり大きいと知っていますが、私はすべてを説明すれば良いと思っていました。

詳細が必要な場合はお知らせください。

ありがとうございました。

編集：

サンプル・データ

EDIT2

私はこのような状態では、アラート追加する場合。

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

次に、データを状態ボックスに取得しています。ビット奇妙。

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

Answer 1

は、あなたの状態がで来ている場合[i] .id）; `ループで、あなたが見ていることを私たちに教えてください。都市部と同じ。