Javascript 如何在v4.0中将类添加到select2元素

这与这个关于如何操作的问题非常相似，但是这里的答案似乎针对的是框架的早期版本，该版本在v4.0中经历了一些突破性的更改

根据这一点，有几个未记录的属性可以传递给select2构造函数，包括：

containerCss

、

containerCssClass

、

dropdownCss

、以及

dropdownCssClass

但是，在版本4中，当我运行以下代码时：

$('.select2').select2({
    containerCss: "wrap"
});

我得到以下错误：

未捕获错误：无select2/compat/containerCss

如何在v4.0中将类传递给Select2

下面是StackSnippets中的一个示例：

$（'.select2'）。选择2({
集装箱船：“包裹”
});

代数
阿拉斯加州
亚利桑那州
您可以使用以下选项将类添加到容器（选择）或下拉列表（选项）：

$（'.select2'）。选择2({
ContainerCSClass：“自定义容器”，
下拉菜单类：“自定义下拉菜单”，
});

根据报告：

如果您使用Select2（Select2.full.js）的完整版本，在某些情况下会使用兼容模块，以确保您的代码仍按预期的方式运行

根据，可以通过以下选项：


然而，Select2在定义“容器”是什么以及在哪里可以找到它方面并不是很好

下面是一些高级html结构的分解图，其中显示了自定义类：


下面是一个正在运行的演示，它将自定义类输出到容器和下拉包装器，然后使用它们设置每个部分的颜色（只是为了证明它们正在插入）


$（'.select2'）。选择2({
ContainerCSClass：“自定义容器”，
下拉菜单类：“自定义下拉菜单”，
});
选择{
宽度：200px；
}
.定制集装箱跨度{
颜色：蓝色！重要；
}
.自定义下拉列表{
颜色：红色；
}

代数
阿拉斯加州
亚利桑那州
找到了添加类的方法。
有同样的问题，我自己找不到解决办法，所以这里是：

$('.select2').on('click',function(){
  var matchBlock = $(this).prev();
  if(matchBlock.hasClass('select-control-left')){
    $('.select2-dropdown').addClass('blue-select');
  }
  else{
     $('.select2-dropdown').addClass('orange-select');
  }
});

Select2将存储它在原始select元素上使用的所有信息。您可以通过调用原始元素上的
.data（'select2'）
来访问以下信息：


从那里，您可以访问
$container
属性来标识DOM中的容器，并将类添加到其中，如下所示：

var$select2=$（'select.select2'）.select2（）
$select2.data（'select2'）。$container.addClass（“包装”）

下面是堆栈片段中的一个演示

var$select2=$（'select.select2'）.select2（）
$select2.data（'select2'）。$container.addClass（“wrap”）
body。选择2.0{
宽度：200px；
}
body.wrap.select2选择--单选{
身高：100%；
}
body.select2-container.wrap.select2-selection--single.select2-selection\u{
单词包装：打断单词；
文本溢出：继承；
空白：正常；
}

很长的一个名字
阿拉斯加州
亚利桑那州
我们正在为Select2使用React包装器，因此当前的答案都不适用于我们。但是，即使我们无法通过将类添加到基本元素中，然后使用以下方法将类添加到容器中，我们仍然能够生成针对容器的CSS：


$（'.select2'）.select2（）
.wrap+。选择2个容器。选择2个选择--单个{
边框：实心1px#F00；
}

代数
阿拉斯加州
亚利桑那州
如果要将类添加到所有元素中，下面是简短的答案

$.fn.select2.defaults.set('containerCssClass', 'wrap');

欢迎来到SO！请始终对您的答案进行解释。通常，没有解释的答案很难理解，或者你试图表达的观点并不明显。在这个特殊的例子中，我还想知道这个答案与已有答案相比有多大的附加值…@nulle，我已经更新了答案，添加了一个演示，但是cfi是非常正确的。我认为你的答案有一个附加值，但它几乎被删除，而没有解释你在做什么。提示：如果答案中已经有一个工作堆栈片段，您可以单击“复制”来回答并调整您正在更新的代码部分。即使这也不能代替解释，但它是一个有用的POC，可以迫使您使用JQuery充实答案中缺少的部分，如
.addClass
@KyleMit，前提是您可以使用
$（“#my_id”）获取对象。选择2（）是否有方法使用JQuery抓取Select2为该标记显示的相应
？我想隐藏具有特定类的所有下拉选项。谢谢你的帮助！对于那些希望以下拉列表（附加到
）为目标的用户，您可以以类似的方式访问它：
$（'select2'）.select2（）.data（'select2'）。$dropdown.addClass（“wrap”）
我对@walther的评论进行了投票，但就在那之后，我发现我没有包括
select2。full.js
version-
containercsclass
仅在基本模块中可用。这只适用于
select2选择
。那么实际的下拉列表本身呢
select2 container
此选项不起作用，我已尝试过，但它没有将任何类添加到container类中。我猜select2本身就是一个bug？@Codemole，我补充了一些进一步的解释。它应该可以工作，但可能不清楚它是如何工作的，所以希望这能有所帮助