Question

我创建了脚本，它发送AJAX请求并使用选项元素列表刷新 select 元素。完成后，我尝试使用JQuery plugin jQuery.sortElements.js对选项元素进行排序：

/* If region is specified */
    if (regionId != '0') {
        /* AJAX request to get city list and refresh select state. */
        $.getJSON('/json/cities', {region_id: regionId}, function(json) {
            $("select.changedBy-" + regionSelectId).each(function() {
                var citySelect = $(this);
                $.each(json, function(id, name) {
                    $('<option value="' + id + '">' + name + '</option>').appendTo(citySelect);
                });
            });
        });

        /* Sorting */
        $("select.changedBy-" + regionSelectId).each(function() {
            $(this).find('option').sortElements(function(option1, option2) {
                var option1Value = $(option1).attr('value');
                var option2Value = $(option2).attr('value');
                if (option1Value == '0') return -1;
                if (option2Value == '0') return 1;
                if (option1Value == regionId) return -1;
                if (option2Value == regionId) return 1;
                return $(option1).text() > $(option2).text() ? 1 : -1;
            });
        });
    }
};

不幸的是，只有在Firebug中将断点放在以下行时才进行排序：

$("select.changedBy-" + regionSelectId).each(function() {

在其他情况下（常规模式），它不会对选项元素进行排序。你能帮我找一下这个问题的原因吗？

谢谢，鲍里斯。

Answer 1

听起来像是一个时间问题。您确实意识到getJSON()调用是异步的，对吧？ JavaScript引擎将转到$.getJSON()，发出请求，然后几乎立即转到您的排序代码。它将无法排序，因为没有任何要排序的元素，但是，因为请求尚未完成。

我怀疑当您设置断点时，会为请求提供足够的时间来完成，并且您会看到事情按预期方式运行。

我会建议以下其中一项

在追加所有新的getJSON()

<option>

在完成创建所有新<option>

这是第一个建议的代码（无限简单 - 它只涉及将您的排序代码剪切并粘贴到回调函数体中）：

 if (regionId != '0') {
        /* AJAX request to get city list and refresh select state. */
        $.getJSON('/json/cities', {region_id: regionId}, function(json) {
            $("select.changedBy-" + regionSelectId).each(function() {
                var citySelect = $(this);
                $.each(json, function(id, name) {
                    $('<option value="' + id + '">' + name + '</option>').appendTo(citySelect);
                });
            });

            /* Sorting */            
             $("select.changedBy-" + regionSelectId).each(function() {
                $(this).find('option').sortElements(function(option1, option2) {
                    var option1Value = $(option1).attr('value');
                    var option2Value = $(option2).attr('value');
                    if (option1Value == '0') return -1;
                    if (option2Value == '0') return 1;
                    if (option1Value == regionId) return -1;
                    if (option2Value == regionId) return 1;
                    return $(option1).text() > $(option2).text() ? 1 : -1;
                });
            });
        });
    }

Answer 2

javaScript是单线程语言，当没有创建选项元素时，您的排序代码将被调用，因为它们是在完成ajax请求时创建的。在选项元素创建之后要强制排序代码是将排序代码放入函数并在ajax请求完成时调用它，在创建选项元素之后，它将是：

 makeAjaxCall(callBack(){
  createOptionElements();
  SortOptionElements();
});

希望它适合你。祝你好运：）

Answer 3

Ajax请求可能是异步的。使用同步Ajax请求

只有在Firebug中存在断点时，JQuery才会排序

3 个答案: