선택 상자의 JQuery 값이 설정되지 않음

Question

내 웹 사용자가 만든 목록을 편집 할 수있는 페이지를 만듭니다. 목록에는 각각 자체 하위 범주가있는 3 가지 범주의 목록이 있습니다. 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

당신은 $ (문서) CSTE 연구진 ("ajaxComplete"함수() { }를) 시도되지 않은 경우,이 작업을

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