未設置選擇框的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
});