javascript - 在Ajax请求中动态刷新和清除JQuery Chosen插件

我试图动态地用“ 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');
}
     });

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

最佳答案

我认为您需要为此使用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');
});

UPDATE1：

我乍看之下错过了闭包，现在代码已更新。

UPDATE2：

重新编写ajax请求成功回调中的标签。

UPDATE3：

这是简单的demo，我已经注释了一些不重要的代码以显示其工作原理。

关于javascript - 在Ajax请求中动态刷新和清除JQuery Chosen插件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25140839/