有没有办法知道何时在 Select2 中选择了一个选项？答案

【问题标题】：Is there a way to know when an option has been selected in Select2?有没有办法知道何时在 Select2 中选择了一个选项？
【发布时间】：2017-12-26 19:33:42
【问题描述】：

我正在使用 jQuery 插件 select2 (V4)，并且我想在选择一个选项时更改边框颜色——这将在此类中：

.select2-selection--single

但是在选择选项时查看类更改等，它不会出现在CSS中知道此内容的任何牢固方式;我真正注意到的唯一一件事是在主 select2 容器中添加了一个 select2-container--below 类，但我认为使用它并不明智，因为它似乎不是为了那个。

有没有简单的方法来实现这一点，还是我必须自己添加这个功能？

【问题讨论】：

【解决方案1】：

您可以同时使用模板和 Select2 CSS 自定义来实现您的目标。

例如，将自定义样式应用于下拉列表中选择的元素：

li[aria-selected="true"] {
  border: 1px solid red !important;
}

使用Dropdown template 格式化下拉列表中的项目，使用Selection template 格式化所选元素。

以下是使用这些技术的代码示例：https://jsfiddle.net/beaver71/0573357j/

【讨论】：

感谢您的技术。我之前在 select2 中使用过模板，但最终只是监听了他们的 select2:select 事件，然后根据该事件更改了边框颜色。
你也可以在templateResult函数中改变容器的样式，定义如下：function formatStateDropdown (state, container)。小提琴已更新。