我想在 Select2 插件中添加一个自定义函数（但我没有必要的知识），比如
$('.select2').select2({
optionDrawCallback : function(li_element){
return li_element.className += 'bg-'+li_element.text;
}
});
然后我去源码（select2.full.js），找到了每个选项元素的创建位置，就是这里：
Results.prototype.option = function (data) {...}
但现在我不知道如何触发我的功能。
我能够通过dataAdapter 触发它，这应该是选择本身，但这不是我需要的。
任何建议将不胜感激。
【问题讨论】：
标签： javascript jquery plugins callback select2
更新答案：
您应该考虑避免进入第 3 方库的代码并对其进行更改，因为您的更改将在未来的版本中被覆盖（假设您获得它们），并且您必须再想想把它放在哪里。
每个 3rd 方插件/库都有自己的工作方式和应该使用的 API。在文档中查找您需要的内容。如果您遗漏了某些内容，可能是有原因的，或者您可以要求开发人员添加它，甚至可以自己添加并创建一个拉取请求。
为所有库传递回调没有“神奇的解决方案”，因为它们都做不同的事情，并且每个都应该以不同的方式处理。
你能说你总是需要在事情开始发生之前、之后、可能两者甚至在图书馆行动期间都需要回调吗？
如您所见，这实际上取决于您选择的库的功能以及它是如何实现的。如果文档中有回调选项 - 它可能会以我上面提到的一种或多种可能的方式以一种有意义的方式实现。
至于您使用 select2 插件的具体情况：
查看文档中的 Templating 选项。
这是一个如何实现您所要求的示例。
var data = [{
id: 0,
text: 'gray'
}, {
id: 1,
text: 'green'
}, {
id: 2,
text: 'blue'
}, {
id: 3,
text: 'yellow'
}, {
id: 4,
text: 'red'
}];
function formatState(state) {
var $state = $('<div class="bg-' + state.text + '" style="background-color: ' + state.text + ';" > ' + state.text + '</div>')
return $state;
};
$('.select2').select2({
data: data,
templateResult: formatState
});<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
<select class="select2">
</select>如果您愿意，它在 JsFiddle 中：https://jsfiddle.net/yq70y8cy/1/
旧答案：
您应该考虑避免进入第 3 方库的代码并对其进行更改，因为您的更改将在未来的版本中被覆盖（假设您获得它们），并且您必须再想想把它放在哪里。
相反，尽量保持简单，使用常规的 jQuery / javascript 代码，例如：
$('.select2 li').each(function(index){
var $this = $(this);
$this.addClass('bg-' + $this.text());
})
【讨论】：
<li> 元素（例如 $('.select2 li[role=treeitem])，当然这可能会有所改变取决于您选择的确切配置。例如，转到their example page 并将以下代码粘贴到浏览器控制台中：$(".select2-dropdown li[role=treeitem]")，它将记录该页面中第二个示例的所有正确<li>s。跨度>
select 时它才会附加到正文。如果您在单击select 的同时查看html，您将看到带有select2-container select2-container--default select2-container--open 类的span 附加到正文，当select 关闭时，它会被删除。也就是说，有一个回调允许我在生成列表元素时添加一个类比循环每次点击要快得多
我使用on jquery 函数为select2 类的单击事件添加了一个回调，它显示了默认/选定选项。只要 select2 的标记结构保持不变，这就可以正常工作。
请参考此fiddle 进行演示。
$('.select2').on('click', function(li_element){
$(this).siblings(".select2-container--open").find(".select2-results__option").each(function(index,el) {
console.log($(el).text());
$(el).addClass('bg-' + $(el).text());
});
});
【讨论】：