下拉式觸發器更改事件

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

然後我得到狀態框中的數據。有點奇怪。

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