Question

我们正在使用Select2版本4.0.0-rc2

为了改善移动设备的使用，我们希望在下拉列表中为已点击的项目添加一个类。

我尝试对这样的select2事件做出反应：

  element.select2({}).on('select2:open', function(){
     this.addClass('my-class');
  }

然而，问题在于这个＆＃39;是选项而不是渲染选择li。我相信这个＆＃39;是因为Select2将事件委托/传递给选择选项。

我还尝试直接定位结果项，如下所示：

$('.select2-results li ["aria-selected=true"]').on('click', function(){
    this.addClass('my-class');
}

但是我遇到了和上面相同的问题。＆＃39;这＆＃39;甚至Event.target都是选项。

我从旧版本的select2中找到了一些建议并尝试了这个：

  element.select2({}).on('select2:open', function(e){
     $('.search-results li [aria-selected=true]').on('mouseup', function(e){
     e.stopPropagation();
     this.addClass('my-class');
  }

这个似乎只适用于第二次点击。所以，我点击打开列表，我选择一个项目，没有任何反应，我选择另一个项目，然后获得该类。

注意：上面的一些选择器可能不准确，但它只是举个例子。我的所有代码都有效，除了我无法在正确的元素上触发我的事件。

有人可以建议修复吗？

或者，在Select2页面（https://select2.github.io/options.html）上，他们建议您在版本4中使用适配器编写插件。我不熟悉适配器，只能假设它们是指适配器模式？我不明白我是怎么开始的。我理解这个概念，我编写了一个包装器，以便我的函数被调用，我可以修改它们并传递给库方法？如果有人能够提供有关我如何做到这一点的任何进一步信息，我们将不胜感激。

Answer 1

我不知道如何为选定的词添加特定的类，但您可以使用[aria-selected=true] CSS选择器来自定义它们的样式。

.select2-container--default .select2-results__option[aria-selected=true] {
    color: red;
    font-weight: bold;
}

Answer 2

对于我们想要针对移动触摸调整它的情况，我们设法让它使用此代码。请注意，'tap'事件由jQuery mobile提供：

element.select2({}).on('select2:open', function(e){
 $('.search2-results li').on('tap', function(e){
     $(e.target).addClass('my-class');
 }
}

如何使用select2在click事件上为选定元素添加类？

2 个答案: