如何在select2.js v4.0 中显示ajax 数据？

Question

我在 asp mvc 项目中使用 select2 v4.0 https://select2.github.io/，我想显示来自动态数据的简单下拉列表

3.6 版本的老方法已经行不通了：

我有一个 C# 方法：

public JsonResult GetSrcMethod()
 {
            var list = new[]
            { 
                new { id= 0, text= "Smith" },
                new { id= 1, text= "John" }, 
                new { id= 2, text= "Philippe" },    
            }.ToList();

            Object json = JsonConvert.SerializeObject(list);
            return Json(json, JsonRequestBehavior.AllowGet);   
 }

因此，返回的数据为：

[{"id":0,"text":"Smith"},{"id":1,"text":"John"},{"id":2,"text":"Philippe"}]

我有一个 javascript 代码可以在以前的版本 3.6 上运行：

$(".example-select2").select2({
        ajax: {
            dataType: 'json',
            url: '@Url.Action("GetSrcLanguages", "GetCheckSet")',
            results: function (data) {
                return {results: data};
            }              
        }
    });

它呈现一个显示 'No result found'

的空下拉列表

你知道v4.0是怎么做的吗？

Answer 1

Id 与 id 不同，JavaScript 对象的属性区分大小写。这同样适用于 Text 和 text，你想使用全小写版本。

public JsonResult GetSrcLanguages()
        {
            var list = new[]
            { 
                new { id = 0, text = "Smith" },
                new { id = 1, text = "John" }, 
                new { id = 2, text = "Philippe" },    
            }.ToList();

            Object json = JsonConvert.SerializeObject(list);
            return Json(json, JsonRequestBehavior.AllowGet);   
        }

此外，ajax.results 方法在 4.0.0 中被重命名为 ajax.processResults，以避免与具有现有 results 方法的 AJAX 传输冲突。所以你的 JavaScript 实际上应该看起来像

$(".example-select2").select2({
    ajax: {
        dataType: 'json',
        url: '@Url.Action("GetSrcLanguages", "GetCheckSet")',
        processResults: function (data) {
            return {results: data};
        }              
    }
});

如何在select2.js v4.0 中显示ajax 数据？

How display ajax data in select2.js v4.0?

javascript

ajax

asp.net-mvc

jquery-select2

jquery-select2-4