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

目前，当我运行上述选项时，所选的选项为空，并且没有可见的选项或选项组。

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

UPDATE1：

我第一次看错了闭包，现在代码更新了。

UPDATE2：

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

UPDATE3：

这里很简单demo，我评论了一些非重要的代码，以展示它的工作原理。

刷新＆amp;在ajax请求中动态清除JQuery Chosen插件

1 个答案:

UPDATE1：

UPDATE2：

UPDATE3：