Select2菜单构建完成后的回调/事件：动态着色选项遇阻

我太懂你的痛点了——select2:opening和select2:open的触发时机确实太早，那会儿下拉菜单的结果列表还没被渲染出来，自然找不到对应的li元素去修改样式。这里有两个靠谱的方案能完美解决这个问题：

方案一：用select2:results:rendered事件精准触发 #

Select2专门提供了select2:results:rendered事件，它会在下拉结果列表完全渲染完成后才触发，这时候你就能稳稳获取到所有选项元素了。

修改后的代码可以这么写：

$(document).on("select2:results:rendered", function(e) {
  // 从事件对象关联当前Select2控件的结果容器，不用硬写固定ID
  const $resultsContainer = $(e.target).data('select2').$results;
  $resultsContainer.find('li').each(function(k, ele) {
    console.log(k, $(ele).text());
    $(ele).css('background-color', COLOROBJECT[k]).addClass('text-shadow');
  });
});

这种写法不用绑定固定的控件ID，适配性更强，哪怕页面上有多个Select2控件也能正常工作。

方案二：用templateResult自定义渲染（更推荐） #

其实Select2本身就支持通过templateResult选项自定义每个选项的渲染逻辑，这种方式更贴合Select2的设计思路，还能避免依赖事件触发时机的问题，连搜索过滤后重新渲染的选项也能自动带上样式。

示例代码如下：

$('#your-select-element').select2({
  templateResult: function(item) {
    // 处理默认占位符或加载项，直接返回文本即可
    if (!item.id) {
      return item.text;
    }
    // 创建元素并按需设置样式
    const $option = $('<span></span>').text(item.text);
    // 可根据选项索引或自身属性获取对应颜色
    const targetColor = COLOROBJECT[item.index] || '#f5f5f5';
    $option.css('background-color', targetColor).addClass('text-shadow');
    return $option;
  }
});

这种方法在每个选项渲染时就直接应用了样式，稳定性拉满，完全不用纠结事件触发时机的问题。

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