通过ajax加载选择选项，然后设置一个值答案

【问题标题】：Loading Select options via ajax and then setting a value通过ajax加载选择选项，然后设置一个值
【发布时间】：2015-11-13 21:51:13
【问题描述】：

我有一个选择字段，#parentCatSelect，其值在页面通过函数acLoadParentCategories 加载后通过 AJAX/PHP 生成。

该功能需要以两种不同的方式使用，首先是创建一个新零件（可以正常工作），其次是更新零件。当用户更新一个部件时，所有的表单值（包括这个）都应该通过 AJAX 从数据库中的值加载。所有值都正确加载，除了这个。

我一生都无法弄清楚为什么我的值在加载选择值后没有设置。

我通过 ajax 加载类别的功能：

var acLoadParentCategories = function( callback ) {

    var _data = {
        action: 'ac_ajax_load_parent_cats'
    };

    jQuery.post(
        the_ajax_script.ajaxurl,
        _data,
        function( response ) {

            var results = JSON.parse(response.results);
            var html = '';

            for (var i = 0; i < results.length; i++ ) {
                html += '<option value="' + results[i].cat_id + '">' + results[i].cat_name + '</option>';
            }

            jQuery('#parentCatSelect').append(html);
        }
    );

    callback();
    return;
};

以及我在哪里加载它，然后正确设置 val

acLoadParentCategories( function() {
    console.log('happening');
    jQuery('#parentCatSelect option[value="1"]').attr('selected', true);
});

console.log 语句被正确调用，但无论我尝试什么，在生成选择框后我都无法正确设置值。我做错了什么？

（为了清楚起见，我知道我是手动分配值“1”而不是动态加载 ID。我这样做只是为了看看它是否可行，但仍然没有骰子。）

【问题讨论】：

如果你把jQuery('#parentCatSelect option[value="1"]').attr('selected', true);放在callback()上面，它工作正常吗？
抱歉把callback();放在jQuery('#parentCatSelect').append(html);之后
因为您的回调将在 ajax 完成之前被调用。如果它解决了您的问题，请告诉我..
是的，这解决了问题。 AJAX完成后如何让回调加载？
因为您的 callback() 在您的 ajax 完成之前被执行.. 如果您的 ajax 调用是同步的，您的回调将在相同的位置工作.. 但它不好..

标签： javascript jquery ajax

【解决方案1】：

问题是因为您在$.post 之后添加了callback() 函数，默认情况下是异步的。因此，您的“回调（）”将在 ajax 完成之前执行。你有两个选择

让您的 $.ajax 同步，我不建议这样做。
在jQuery('#parentCatSelect').append(html);（$.post 的成功块）之后调用您的回调，即在您的 DOM 填充了值之后。

希望对你有帮助..

【讨论】：