select2 v4.0.13 编程添加选项后已选值文本不显示问题

这个异常是事件触发逻辑错误+选项数据格式不匹配共同导致的：

1. 你赋值时触发的change.select2是Select2的内部命名空间事件，仅会同步组件内部的值状态，不会触发选中文本的重绘流程。这也是为什么DOM上title属性已经写入正确文本（内部值存储正常）、清除按钮正常渲染，但展示区域没有文本的直接原因。
2. 你配置了自定义的templateSelection渲染函数，该函数仅在Select2接收到标准change事件、且能拿到符合格式要求的选中项数据时才会执行生成展示文本。你手动构造Option时用了name字段作为显示文本，手动触发select2:select事件时传入的原始数据没有对齐Select2默认的选项字段规范（Select2默认读取text字段作为显示文本），渲染函数拿不到合法的入参，自然无法生成文本节点插入到渲染容器中。
3. 额外需要检查执行顺序：预选值赋值逻辑必须在Select2初始化完成后执行，如果赋值代码跑在初始化之前，追加的Option会被初始化流程重置，也会出现各类渲染异常。

• 事件使用错误：调用带.select2命名空间的change事件，跳过了Select2的渲染更新链路
• 数据格式不统一：没有对AJAX返回的选项数据做字段映射，返回结果用name存显示文本，和Select2默认识别的text字段不匹配，自定义模板读取数据时出现异常
• 冗余逻辑：不需要手动触发select2:select事件，正确追加Option后触发标准change事件，Select2会自动读取Option属性完成全流程更新，手动触发事件反而容易因为传入数据结构不合法导致渲染失败

1. 调整预选值赋值逻辑，替换错误的事件触发方式：

let $selectEl = $('#select2-id');
$.ajax({
   type: 'GET',
   dataType: 'json',
   url: baseAjaxUrl + '/api_endpoint?q=' + myVar,
}).then(function (data) {
   if (data.length) {
       const selectedItem = data[0];
       // 构造Option时保证文本和值正确传入
       const option = new Option(selectedItem.name, selectedItem.id, true, true);
       $selectEl.append(option);
       // 触发标准change事件，不要加.select2命名空间
       $selectEl.trigger('change');
   }
});

2. 统一选项数据字段格式，在AJAX配置的processResults中做字段映射，保证所有选项都带Select2识别的text字段，和自定义模板的读取逻辑对齐：

processResults: function (data) {
   return {
       results: data.map(item => ({
           ...item,
           text: item.name // 把返回的name字段映射为Select2默认的text字段
       }))
   };
},

调整完成后，Select2会在接收到change事件后自动读取选中Option的属性，调用templateSelection生成展示文本插入到渲染容器中，不会再出现文本缺失的问题。

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