正确使用jQuery select2的initSelection回调与远程数据

时间:2013-03-02 12:46:42

标签: javascript jquery jquery-select2

我使用jQuery select2插件来使用提供的ajax回调函数检索邮政编码,如下所示:

$(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
                        };
                    })
                };
            }
        }
    });
});

选择两个邮政编码后,我会在DOM中得到hidden input

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

我遇到的问题是,一旦重新显示表单(例如,在某些其他控件出错的情况下),选择(即两个邮政编码,尤其是text)不会尽管hidden input确实有两个值(即4797和4798,它们是邮政编码的id),但在表单中显示。

我不确定在重新显示表单或是否有更好的方法时我是否必须再进行一次ajax往返。

有人可以提供建议吗?

1 个答案:

答案 0 :(得分:25)

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

演示:Fiddle