我正在創建一個依賴于 Ajax 的下拉串列，除了傳入每個選擇選項的正確 ID 之外，我能夠讓一切正常作業，這是我的 HTML：
<p>
<select name="country" id="country">
<option value="">Select Country</option>
<?php foreach($countries as $country) { ?>
<option value="<?php echo $country[$columnName['COLUMN_NAME']]; ?>"><?php echo $country['name']; ?></option>
<?php } ?>
</select>
</p>
<p>
<select name="state">
<option value="">Select State</option>
</select>
</p>
PHP 代碼運行良好，并正確獲取所有國家/地區及其 ID。但是當我使用 Ajax 填充狀態選擇下拉串列時，我沒有得到每個狀態的 id，這是我的 js：
$(document).ready(function() {
$('select[name="country"]').on('change',function(){
var country_id= $(this).val();
if (country_id) {
$.ajax({
url: "/world/getStates.php",
type: "GET",
data: {'country_id':country_id},
dataType: "json",
success: function(data){
console.log(data);
$('select[name="state"]').empty();
$.each(JSON.parse(data), function(key,value){
$('select[name="state"]').append('<option value="' key '">' value.name '</option>');
});
}
});
}else {
$('select[name="state"]').empty();
}
});
});
這是 console.log （我選擇了第一個選項國家阿富汗，在下面你可以看到屬于它的國家）：
[{"id":"3870","name":"Ghazni"},{"id":"3871","name":"Badghis"},{"id":"3872","name":"Bamyan"},{"id":"3873","name":"Helmand"},{"id":"3874","name":"Zabul"},{"id":"3875","name":"Baghlan"},{"id":"3876","name":"Kunar"},{"id":"3877","name":"Paktika"},{"id":"3878","name":"Khost"},{"id":"3879","name":"Kapisa"},{"id":"3880","name":"Nuristan"},{"id":"3881","name":"Panjshir"},{"id":"3882","name":"Nangarhar"},{"id":"3883","name":"Samangan"},{"id":"3884","name":"Balkh"},{"id":"3885","name":"Sar-e Pol"},{"id":"3886","name":"Jowzjan"},{"id":"3887","name":"Herat"},{"id":"3888","name":"Gh\u014dr"},{"id":"3889","name":"Faryab"},{"id":"3890","name":"Kandahar"},{"id":"3891","name":"Laghman"},{"id":"3892","name":"Daykundi"},{"id":"3893","name":"Takhar"},{"id":"3894","name":"Paktia"},{"id":"3895","name":"Parwan"},{"id":"3896","name":"Nimruz"},{"id":"3897","name":"Logar"},{"id":"3898","name":"Urozgan"},{"id":"3899","name":"Farah"},{"id":"3900","name":"Kunduz Province"},{"id":"3901","name":"Badakhshan"},{"id":"3902","name":"Kabul"}]
我的第二個下拉選擇加載了狀態，但是選項值只是從 0 開始，并根據有多少記錄遞增 1，但我需要顯示每個狀態的確切 id 而不僅僅是遞增的數字，所以這是我的選擇選項在 ajax 加載后的樣子（我只復制了前 4 個而不是整個選項串列）：
<select name="state">
<option value="0">Ghazni</option>
<option value="1">Badghis</option>
<option value="2">Bamyan</option>
<option value="3">Helmand</option>
</select>
但它應該顯示的是這個（屬于每個州的真實 ID）：
<select name="state">
<option value="3870">Ghazni</option>
<option value="3871">Badghis</option>
<option value="3872">Bamyan</option>
<option value="3873">Helmand</option>
</select>
任何人都知道我在每個回圈中缺少什么？
注意：我也嘗試更改 key 為 key.id
uj5u.com熱心網友回復：
使用value.id，而不是' key '作為
var arr = [{"id":"3870","name":"Ghazni"},{"id":"3871","name":"Badghis"},{"id":"3872","name":"Bamyan"},{"id":"3873","name":"Helmand"},{"id":"3874","name":"Zabul"},{"id":"3875","name":"Baghlan"},{"id":"3876","name":"Kunar"},{"id":"3877","name":"Paktika"},{"id":"3878","name":"Khost"},{"id":"3879","name":"Kapisa"},{"id":"3880","name":"Nuristan"},{"id":"3881","name":"Panjshir"},{"id":"3882","name":"Nangarhar"},{"id":"3883","name":"Samangan"},{"id":"3884","name":"Balkh"},{"id":"3885","name":"Sar-e Pol"},{"id":"3886","name":"Jowzjan"},{"id":"3887","name":"Herat"},{"id":"3888","name":"Gh\u014dr"},{"id":"3889","name":"Faryab"},{"id":"3890","name":"Kandahar"},{"id":"3891","name":"Laghman"},{"id":"3892","name":"Daykundi"},{"id":"3893","name":"Takhar"},{"id":"3894","name":"Paktia"},{"id":"3895","name":"Parwan"},{"id":"3896","name":"Nimruz"},{"id":"3897","name":"Logar"},{"id":"3898","name":"Urozgan"},{"id":"3899","name":"Farah"},{"id":"3900","name":"Kunduz Province"},{"id":"3901","name":"Badakhshan"},{"id":"3902","name":"Kabul"}];
$.each(arr, function(key,value){
var html = '<option value="' value.id '">' value.name '</option>';
console.log('value',html);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/367744.html
標籤：javascript 阿贾克斯