Select2预定义AJAX渲染项显示undefined，如何正确渲染选中项？

你遇到的问题核心在于：手动创建Option元素时，没有让Select2正确获取到渲染所需的完整数据对象，导致模板函数formatItem无法访问到item.deleted、item.doctor等字段，从而出现大量undefined。

最简单的解决方案：直接使用Select2的data方法设置选中项 #

不需要手动创建Option元素，直接利用Select2提供的API传入完整的数据对象，它会自动调用你的templateResult和templateSelection函数渲染正确的HTML内容：

$.ajax({
  type: 'GET',
  url: '../ajax/results-selected.php',
  data: { iData: [这里填入获取单个项的ID] }
}).then(function (data) {
  var item = data.results[0];
  // 直接传入完整的item对象数组，Select2会自动处理渲染
  tabSelect.select2('data', [item]);
  // 触发change事件确保UI同步更新
  tabSelect.trigger('change');
});

为什么之前的方法失效？ #

1. 当你使用new Option(item, item.id, true, true)时，Option构造函数会把第一个参数（你的item对象）直接转为字符串，结果就是[object Object]，Select2无法从中提取所需的字段。
2. 即使你尝试new Option(formatItem(item), item.id, true, true)，formatItem返回的是jQuery对象，同样会被转为[object Object]，而且这个过程丢失了原始的item数据，模板函数无法再访问到item.deleted等属性。

备选方案：手动附加数据到Option元素 #

如果你坚持要手动创建Option，需要把item的所有属性附加到Option的dataset中，让模板函数能拿到数据：

$.ajax({
  type: 'GET',
  url: '../ajax/results-selected.php',
  data: { iData: [这里填入获取单个项的ID] }
}).then(function (data) {
  var item = data.results[0];
  // 创建Option时用默认文本（比如item.doctor），后续由模板函数替换
  var option = new Option(item.doctor, item.id, true, true);
  
  // 将item的所有属性存入option的dataset
  Object.keys(item).forEach(key => {
    option.dataset[key] = item[key];
  });
  
  tabSelect.append(option);
  // 用Select2的val方法设置选中值
  tabSelect.val(item.id).trigger('change');
  // 触发select2:select事件并传入完整item数据
  tabSelect.trigger({
    type: 'select2:select',
    params: { data: item }
  });
});

不过第一种方案更简洁可靠，推荐使用。只要你的AJAX返回的item包含formatItem所需的所有字段（id、deleted、doctor、sex、user等），就能完美渲染出带Font-Awesome图标和<small>标签的选中项。

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