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

选择框的JQuery值未设置

1 个答案: