没有设置选择框的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 
});