沒有設置選擇框的JQuery值

Question

我正在創建一個頁面，我的網站的用戶可以編輯他們創建的列表。有三種類別的列表，每種都有自己的子類別。我使用AJAX根據所選類別動態加載子類別。由於這是一個編輯頁面，每個字段的值必須預先設置，以便用戶可以根據需要更改它們。類別加載正常，子類別也一樣。但是，我無法將子類別選擇框的值設置爲列表的子類別值。

這裏是一個加載的子類別的功能：

function loadEditSubcats(){ 
$('#edit-subcategory').empty(); 

var cat = $('#category-hidden').val(); 

var postData = { category : cat }; 

$.post("/assets/scripts/fetch_subcats.php", 
     postData, 
     function(data, text, jqxhr) { 
      $.each(data, function(key, val){ 
       $('#edit-subcategory').append('<option value="' + val + '">' + val + '</option>'); 
      }); 
     }, 
     'json' 
    ).fail(
     function(jqXHR, textStatus, errorThrown) { 
      alert(errorThrown); 
     } 
    ); 
} 

這是我加載的子類別頁面加載時，以及企圖預設的子類的值：

$(document).ready(function() { 
    loadEditSubcats(); 
    $("#edit-subcategory").val($('#subcat-hidden').val()); 
}); 

而且最後，這是子類別的選擇框，以及包含初始子類別的隱藏值：

<input type="hidden" id="subcat-hidden" value="<?=$item->subcategory?>"> 
<div class="form-group col-md-6"> 
    <label id="name-label"><h3>Subcategory</h3></label><br> 
    <span "dropdown-menu-right"> 
     <select class="form-control" id="edit-subcategory"></select> 
    </span> 
</div> 

我認爲也許，AJAX是異步加載的，並且在設置值的時候，子類別實際上並未加載。任何有識之士都非常感謝！謝謝！

Answer 1

你可以改變你的做法像下面，使這項工作

$.ajax({ 
type: "POST", 
url: "/assets/scripts/fetch_subcats.php", 
data: postData, 
success: function(data){ 

    $.each(data, function(key, val){ 
      $('#edit-subcategory').append('<option value="' + val + '">' + val + '</option>'); 
     }); 

    //Do this in success function 
    $("#edit-subcategory").val($('#subcat-hidden').val()); 

}, 
dataType: json 
});