Select2动态添加选项问题：Ajax返回选项已插入但不显示

嘿，我懂你的困扰——你已经确认服务器返回的数据格式没问题，甚至能看到选项被加到了原生<select>标签里，但Select2就是不展示这些选项。问题其实出在你对processResults方法的使用上，完全没必要手动去append选项，Select2本身就有一套处理返回数据并渲染选项的逻辑，你的手动操作反而干扰了它的工作流程。

问题根源 #

Select2的AJAX模块并不依赖原生<select>标签里的选项来渲染下拉列表，它有自己的内部数据模型。当你在processResults里手动把选项添加到原生select时，Select2根本没察觉到这些变化，自然不会把它们展示出来。正确的做法是在processResults里返回符合Select2要求格式的数据，让它自己处理渲染。

修复后的代码 #

把你的processResults方法改成下面这样，它会把服务器返回的数据转换成Select2需要的格式：

<select class="js-data-example-ajax" id="mySelect2"> </select>
<script>
$(document).ready(function() {
  $('.js-data-example-ajax').select2({
    language: "fa",
    dir: "rtl",
    ajax: {
      url: 'search_employees',
      // 这里是修改的核心部分
      processResults: function (data) {
        return {
          results: data.items.map(function(item) {
            return {
              id: item.id,
              text: item.name
            };
          })
        };
      },
      data: function (params) {
        var query = {
          search: params.term,
          type: 'public'
        };
        return query;
      }
    }
  });
});
</script>

解释一下修改点 #

• processResults需要返回一个包含results字段的对象，results是一个数组，数组里的每个元素必须有id和text两个属性（这是Select2默认识别的字段，如果你想用其他字段名，可以通过templateResult和templateSelection自定义，但这里用默认的就足够）。
• 我们用map方法把服务器返回的items数组转换成Select2需要的格式，这样Select2就能自动读取这些数据并渲染到下拉框中了。

这样修改后，你再测试一下，应该就能看到搜索时服务器返回的选项正常显示在Select2的下拉列表里了。

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