web-dev-qa-db-ja.com

リモートデータでのjQueryselect2のinitSelectionコールバックの適切な使用

次のように、提供されているajaxコールバック関数を使用して郵便番号を取得するためにjQueryselect2プラグインを使用します。

$(document).ready(function() {
    $("#postcodes").select2({
        placeholder : "Search for a postcode",
        multiple : true,
        minimumInputLength : 3,
        ajax : {
            url : "/bignibou/utils/findGeolocationPostcodeByPostcodeStartingWith.json",
            dataType : 'json',
            data : function(term) {
                return {
                    postcode : term
                };
            },
            results : function(data) {
                console.log(data);
                return {
                    results : $.map(data, function(item) {
                        return {
                            id : item.id,
                            text : item.postcode
                        };
                    })
                };
            }
        }
    });
});

2つの郵便番号を選択すると、結果のhidden input DOM内：

<input type="hidden" class="bigdrop select2-offscreen" id="postcodes" style="width:600px" name="familyAdvertisement.postcodes" value="4797,4798" tabindex="-1">

私が抱えている問題は、フォームが再表示されると（たとえば、他のコントロールにエラーが発生した場合）、選択範囲（つまり、2つの郵便番号と特にtext）がフォームに表示されないことです。 hidden inputには2つの値があります（つまり、郵便番号のidsである4797と4798）。

フォームが再表示されたときに別のajaxラウンドトリップを実行する必要があるかどうか、またはより良い方法があるかどうかはわかりません。

誰かアドバイスしてもらえますか？

javascriptjqueryjquery-select2
12
balteo

InitSelectionメソッドは、select2に存在する必要のある値を渡す必要があります。

例：

$("#postcodes").select2({
    placeholder : "Search for a postcode",
    multiple : true,
    minimumInputLength : 1,
    data:[],
    initSelection : function (element, callback) {
        var data = [{id:1,text:'bug'},{id:2,text:'duplicate'}];
        callback(data);
    }
}).select2('val', ['1', '2']);

デモ： フィドル

25
Arun P Johny