Select2 AJAX配置报错：TypeError: data is undefined 求助

你遇到的这个错误主要来自两个关键问题：Select2版本兼容的回调函数名称错误和返回JSON格式不符合组件要求，下面一步步帮你修复：

1. 核心问题：回调函数名称不匹配 #

你当前用的results回调是Select2 3.x版本的写法，而Select2 4.0+已经将这个回调更名为processResults。旧的回调名称会让组件无法正确识别数据处理逻辑，直接导致data is undefined的报错。

2. 次要问题：返回JSON格式不符合要求 #

你后端返回的{"1":"...", "2":"..."}这种键值对结构，并不是Select2期望的格式。组件需要的是包含id和text字段的数组，示例如下：

[{"id": "1", "text": "北京"}, {"id": "2", "text": "上海"}]

如果后端暂时无法修改返回格式，我们可以在前端的回调里转换数据结构。

修正后的完整配置代码 #

$('#select-city').select2({
  placeholder: 'Select city',
  allowClear: true,
  theme: 'bootstrap',
  tags: true,
  delay: 250,
  ajax: {
    url: function (params) {
      return '/structure/ajax/ac_cities.php';
    },
    quietMillis: 200,
    dataType: 'json',
    type: "POST",
    data: function (params) {
      return { q: params.term };
    },
    // 替换results为processResults，并处理数据格式
    processResults: function (data) {
      // 将键值对转换为Select2需要的id/text数组
      var formattedResults = [];
      $.each(data, function(id, cityName) {
        formattedResults.push({
          id: id,
          text: cityName
        });
      });
      // 必须返回包含results字段的对象
      return {
        results: formattedResults
      };
    }
  }
});

额外检查项 #

• 确保后端ac_cities.php设置了正确的响应头：

  header('Content-Type: application/json');
  

  这能保证前端正确解析返回的JSON数据，避免因MIME类型错误导致data未定义。
• 打开浏览器控制台的Network标签，查看AJAX请求的返回内容，确认JSON格式正确且没有语法错误。

内容的提问来源于stack exchange，提问作者Andrew