Select2 initSelection PreLoaded数据未显示

Question

我正在使用select2将远程数据加载到一个select中,输入标签有一个预加载的value属性,指向一个预先选择的选项,当我加载页面时,它显示右边有Clear选项(x)的select但是数据没有显示.

这是我的代码:

    function FormatResult(Consig) {
    return Consig.NomCon;
}

function FormatSelection(Consig) {
    $('#strConNom').val(Consig.NomCon);
    return Consig.NomCon;
}

$("#strCon").select2({
placeholder: "Search",
minimumInputLength: 5,
allowClear: true,
ajax: {
    url: "LoadData.asp",
    dataType: 'jsonp',
    data: function (term, page) {
        return {
            q: term,
            CodCas: $('#strCas').val(),
        };
    },
    results: function (data, page) {
        return {results: data.ConsigNom};
    }
},
initSelection: function(element, callback) {
    var id=$(element).val();
    if (id!=="") {
        $.ajax("LoadData.asp", {
        dataType: 'jsonp',
            data: {
                CodCon: id,
                CodCas: $('#strCas').val(),
            },

        }).done(function(data) { 
        callback(data);
        });
    }
},
formatResult: FormatResult,
formatSelection: FormatSelection,
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) { return m; }
});

我该怎么解决这个问题？

Answer 1

确保在initSelection函数中,LoadData.asp传递单个对象而不是包含单个对象的数组.

错误:

[{"id": 5, "text":"myValue"}]

正确:

{"id": 5, "text":"myValue"}

这是你的功能修改.

initSelection: function(element, callback) {
    var id=$(element).val();
    if (id!=="") {
        $.ajax("LoadData.asp", {
        dataType: 'jsonp',
            data: {
                CodCon: id,
                CodCas: $('#strCas').val(),
            },

        }).done(function(data) { 
            callback(data[0]);
        });
    }
},

Answer 2

我遇到了类似的问题,我通过在input元素的html中包含一个value属性来解决它,当然还有适当的formatSelection和initSelection.

传入select2的json有两个字段id和text.

这是我的js代码:

$( "#contributorNameSearchId" ).select2({
        placeholder: "Select a contributor",
        containerCssClass: "dropDown",
        minimumInputLength: 3,
        ajax: { 
            url: "getList?t=contributor",
            dataType: 'json',
            data: function (term, page) {
                return {
                    term: term, // search term
                    page_limit: 10,
                };
            },
            results: function (data, page) { 
                return {results: data};
            }
        },
        allowClear: true,
         formatSelection: function(data) { 
            return data.text; 
        },
        initSelection : function (element, callback) {
            var obj= {id:1,text:'whatever value'};
            callback(obj);
        } 
    }); 

和输入元素本身:

<input value="0000" name="contributorNameSearch" id="contributorNameSearchId"/>

注意value属性的虚拟值.

还有机会你的

callback(data);

需要一个data.something(虽然你的FormatSelection似乎没问题).检查从LoadData.asp返回的数据.

我希望这个对你有用.