Question

我有两个下拉选择下拉列表：一个用于区域，一个用于所选区域中的城市。结果由AJAX加载，在我的响应中，我将所有城市都放在JSON数组中：

{
    1709: "Geertruidenberg", 
    1710: "Netersel", 
    1711: "Macharen", 
    1712: "Beers", 
    1713: "Hank", 
    1714: "Oudemolen", 
    1715: "Nistelrode"
}

我正在使用这个小插件在选择下拉列表中加载数据：

(function($, window) {
    $.fn.replaceOptions = function(options) {
        var self, $option;

        this.empty();
        self = this;

        $.each(options, function(index, option) {
            $option = $("<option></option>")
                .attr("value", index)
                .text(option);
            self.append($option);
        });
    };
})(jQuery, window);

这篇javascript来做AJAX请求：

$('select#Profile_regionId').change(function() {
    $.post('/ajax/getcities', {regionid: $(this).val()}, function(data){
        //console.log(data.cities);
        $("select#Profile_cityId").replaceOptions(data.cities);
    }, 'json');
});

除了城市下拉列表在JSON数组键上自动排序外，所有工作都完好无损。我尝试使用sort（）方法，但它不起作用，因为它是一个Object而不是一个数组。然后我尝试创建一个数组：

var values = [];
$.each(data.cities, function(index,value)) {
    values[index] = value;
}

但由于某种原因，下拉列表从1填充到城市的第一个找到的id（数组的键），我不知道它为什么这样做（数组本身看起来很好）。

我如何对事物进行排序，以便我的城市按照字母顺序排列在下拉列表中？

Answer 1

需要将其转换为数组才能对其进行排序。我们假设这是你的对象。请注意，我将其重新排列为未分类，以证明其有效。

originalData = {
    1712: "Beers", 
    1709: "Geertruidenberg", 
    1710: "Netersel", 
    1713: "Hank", 
    1714: "Oudemolen", 
    1711: "Macharen", 
    1715: "Nistelrode"
};

现在要创建一个数组版本，我们需要创建一个数组，并在其中插入对象。我把钥匙称为“年”。请注意，我们在键上调用parseInt。 JavaScript中的键（数组除外）始终是字符串。例如，{foo: "bar"}有一个字符串键“foo”。这也适用于数字看键。

var dataArray = [];
for (year in originalData) {
    var word = originalData[year];
    dataArray.push({year: parseInt(year), word: word});
}

我们现在有可能将数据排除在外，因此我们手动对其进行排序。请注意，这是区分大小写的排序。例如，“Qux”出现在“foo”之前。

dataArray.sort(function(a, b){
    if (a.word < b.word) return -1;
    if (b.word < a.word) return 1;
    return 0;
});

该函数现在只从我们的数组中提取option.year和option.word。

$.fn.replaceOptions = function(options) {
    var self, $option;

    this.empty();
    self = this;

    $.each(options, function(index, option) {
        $option = $("<option></option>")
            .attr("value", option.year)
            .text(option.word);
        self.append($option);
    });
};

然后你最终使用插件，传递数组。您可以将所有这些代码放在插件中，如果这最适合您。

$('#mylist').replaceOptions(dataArray);

fiddle

Answer 2

这将执行您想要的操作并处理空ID /未定义值：

var data = {
    1709: "Geertruidenberg", 
    1710: "Netersel", 
    1711: "Macharen", 
    1712: "Beers", 
    1713: "Hank", 
    1714: "Oudemolen", 
    1715: "Nistelrode"
};

var values = [];
$.each(data, function(index, value) {
    values[index] = value;
});

values.sort();

$.each(values, function(index, value) {
    if(value != undefined) {
        $("#Profile_cityId").append("<option>"+ value +"</option");
    }
});

只需用你自己的函数替换我输入的append，因为jsFiddle在使用它时遇到了麻烦。演示：http://jsfiddle.net/R4jBT/3/

使用jQuery基于值对JSON数组进行排序

2 个答案:

fiddle