7

2 つのドロップダウン選択ドロップダウンがあります。1 つは地域用で、もう 1 つは選択した地域の都市用です。結果は 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);

そして、AJAX リクエストを実行するためのこの JavaScript の部分:

$('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() メソッドを使用しようとしましたが、配列ではなくオブジェクトであるため機能しません。次に、その配列を作成しようとしました：

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

しかし、何らかの理由で、ドロップダウン リストは 1 から最初に見つかった都市の ID (配列のキー) までいっぱいになり、なぜそれを行っているのかわかりません (配列自体は正常に見えます)。

ドロップダウンリストで都市がアルファベット順に並べられるようにするにはどうすればよいですか?

4

3 に答える 3

9

ソートできるように、配列に変換する必要があります。これがあなたのオブジェクトだとしましょう。これが機能することを証明するために、ソートされないように再配置したことに注意してください。

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

フィドル

于 2013-08-28T14:19:29.990 に答える
3

これはあなたが望むことを行い、空の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");
    }
});

jsFiddle を使用すると問題が発生したため、追加した追加を独自の関数に置き換えるだけです。デモ: http://jsfiddle.net/R4jBT/3/

于 2013-08-28T14:20:38.923 に答える