如何在v4.0中为select2元素添加类

这与关于如何将类添加到select2元素的这个问题非常相似，但是那里的答案似乎针对框架的早期版本，该版本在v4.0中经历了一些重大变化

根据这个问题，为select2-container添加一个额外的自定义类，你可以传递给select2构造函数的几个未记录的属性，包括： containerCss ， containerCssClass ， dropdownCss和dropdownCssClass 。

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

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

我收到以下错误：

未捕获错误：没有select2 / compat / containerCss

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

这是StackSnippets中的一个例子 ：

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

     Algebra Alaska Arizona  

Answer 1

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

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

 var $select2 = $('select.select2').select2() $select2.data('select2').$container.addClass("wrap") 

这是Stack Snippets中的一个演示

 var $select2 = $('select.select2').select2() $select2.data('select2').$container.addClass("wrap") 

 body .select2.narrow { width: 200px; } body .wrap .select2-selection--single { height: 100%; } body .select2-container.wrap .select2-selection--single .select2-selection__rendered { word-wrap: break-word; text-overflow: inherit; white-space: normal; } 

     Really long name that normally Alaska Arizona  

Answer 2

根据4.0公告中的迁移指南 ：

当迁移者来自旧版本的Select2时，应该注意一些重大变化。

如果您使用Select2的完整版本 （select2.full.js），将自动通知您主要的重大更改，并且在某些情况下将使用兼容性模块以确保您的代码仍然按照您的预期运行。

因此，以下库更改应该有效：

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

     Algebra Alaska Arizona  

Answer 3

找到了添加类的方法。 有同样的问题无法找到方法并自己做，所以这里是：

 $('.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'); } }); 

Answer 4

我们正在为Select2使用React包装器，所以当前的答案都不适用于我们。 但是，我们能够制作以容器为目标的CSS，即使我们无法通过将类添加到基本元素，然后使用相邻的CSS选择器来添加类：

 $('.select2').select2(); 

 .wrap + .select2-container .select2-selection--single { border: solid 1px #F00; } 

     Algebra Alaska Arizona  

Answer 5

如果要将类添加到所有元素，这是简短的答案。

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