javascript - 在 ajax 请求中动态刷新和清除 JQuery 选择的插件

Question

我正在尝试使用“optgroup”和“option”动态填充 jquery 选择的插件。因此，我嵌套了 ajax 请求和 forloops:

$.ajax({
      url: '@Html.Raw(Url.Action("GetCat", "MController"))',
      data: { ID: metada },
      success: function (data) {
           var categories = data.split(",");

       for (i = 0; i < categories.length; i++) {
        $.ajax({
                   url: '@Html.Raw(Url.Action("GetCat", "MController"))',
                   data: { ID: cetada },
                   success: function (data) {
                        $("#picker").append("<optgroup label='" + categories[i] + "'>");
                        var subcategories = data.split(",");

                        for (i = 0; i < subcategories.length; i++) {
                          $("#picker").append("<option value='"+subcategories[i]+"'>" + subcategories[i] + "</option>")
                        }
                        $("#picker").append("</optgroup>");

                   }
         });        
    }
    $("#picker").trigger('chosen:updated');
}
     });

当前，当我运行上述命令时，所选选择为空，并且没有可见的选项或 optgroup。

Answer 1

我认为你需要使用promises为此:

var promises = [];
for (var i = 0; i < categories.length; i++) {
    promises.push(
        (function(innerI){
            return $.ajax({
                url: '@Html.Raw(Url.Action("GetCat", "MController"))',
                data: { ID: cetada },
                success: function (data) {
                    var optgroup = $('<optgroup>').attr('label', categories[innerI]);
                    var subcategories = data.split(",");
                    for (var i = 0; i < subcategories.length; i++) {
                        var option = $('<option>').val(subcategories[i]).text(subcategories[i]);
                        optgroup.append(option);
                    }
                    $("#picker").append(optgroup);
                }
            });
        })(i)); // unbind i to make closure work.
}
$.when.apply($, promises).then(function() {
    $("#picker").trigger('chosen:updated');
});

更新1:

我第一眼就错过了闭包，现在代码已更新。

更新2:

重写了在ajax请求的成功回调中使用标签的方法。

更新3:

这里很简单demo ，我注释了一些不重要的代码来展示它是如何工作的。