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

Posted 2023-05-07

【中文标题】如何在 select2.js v4.0 中显示 ajax 数据？

【英文标题】：How display ajax data in select2.js v4.0?

【发布时间】：2015-10-08 22:08:11

【问题描述】：

我在一个 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"]

我有一个在以前的 3.6 版本上工作的 javascript 代码：

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

它呈现一个显示“未找到结果”的空下拉列表

你知道如何在 v4.0 中做到这一点吗？

【参考方案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;
                      
    
);

【讨论】：

谢谢，你是对的，但肯定还有另一个错误，因为修复该错误后，它仍然显示 'No Result found' ，几乎所有的东西都已经改变了 v4 所以我想结果方法肯定是折旧，我正在寻找新的方法来做到这一点，但我在文档中找不到它

我将方法结果：function (data) return results: data; 替换为 processResults: function (data) return results: JSON.parse(data); 并且它有效！非常感谢，你看到了错误！如果您通过添加该代码示例来更新您的答案，我很乐意将其标记为答案！ :D