Javascript v4.0如何给select2元素添加class

How to add class to select2 element in v4.0

提问by KyleMit

This is very similar to this question on how to add class to select2 element, however the answers there appear to target earlier versions of the framework which has undergone some breaking changes in v4.0

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

According to this issue to add an additional custom class to select2-container, there were several undocumented properties you could pass to the select2 constructor, including: containerCss, containerCssClass, dropdownCss, and dropdownCssClass.

根据这个问题的其他自定义类添加到选择2容器，有几个无证属性，你可以传递给选择2的构造，包括：containerCss，containerCssClass，dropdownCss，和dropdownCssClass。

However in version 4 when I run the following code:

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

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

I get the following error:

我收到以下错误：

Uncaught Error: No select2/compat/containerCss

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

How can I pass a class to Select2 in v4.0?

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

Here's an example in StackSnippets:

这是 StackSnippets 中的一个示例：

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

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<select class="select2 narrow wrap">
  <option value="AL">Algebra</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

回答by Nulle

Select2 will store all the information it uses on the original select element. You can access the following information by calling .data('select2')on the original element:

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

From there, you can access the $containerproperty to identify the container in the DOM and add the class to that like this:

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

var $select2 = $('select.select2').select2()

$select2.data('select2').$container.addClass("wrap")

Here's a demo in Stack Snippets

这是 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;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>

<select class="select2 narrow wrap">
  <option value="AL">Really long name that normally</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

回答by KyleMit

You can use the following options to add a class to the container(selection) or dropdown(options):

您可以使用以下选项将类添加到容器( selection) 或下拉列表( options)：

$('.select2').select2({
    containerCssClass: "custom-container",
    dropdownCssClass: "custom-dropdown",
});

According to the Migration Guide in the 4.0 Announcement:

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

If you use the full buildof Select2 (select2.full.js) compatibility modules will be used in some cases to ensure that your code still behaves how you were expecting.

如果您使用Select2 ( select2.full.js)的完整版本，则在某些情况下将使用兼容性模块来确保您的代码仍然按照您的预期运行。

According to the Configuration Docs, the following options can be passed:

根据Configuration Docs，可以传递以下选项：

However, Select2 isn't great about defining what a "container" is and where you'd expect to find it.

但是，Select2 并不能很好地定义“容器”是什么以及您希望在哪里找到它。

Here's a breakdown of some of high level html structures and where the custom classes show up:

以下是一些高级 html 结构的细分以及自定义类的显示位置：

Here's a running demo that outputs the custom classes to the container and dropdown wrappers and then uses them to style the color of each section (just to prove they're being inserted)

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

$('.select2').select2({
    containerCssClass: "custom-container",
    dropdownCssClass: "custom-dropdown",
});

select {
  width: 200px;
}

.custom-container span {
  color: blue!important;
}
.custom-dropdown {
  color: red;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>

<select class="select2">
  <option value="AL">Algebra</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

回答by Anton Pogonii

Found a way to add a class. had the same problem couldnt find a way and made it myself, so here it is:

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

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

回答by Chase Sandmann

We're using a React wrapper for Select2, so none of the current answers worked for us. However, we were able to make CSS that targeted the container even though we could not add a class to it by adding the class to the base element, then using an adjacent CSS selector:

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

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

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

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<select class="select2 narrow wrap">
  <option value="AL">Algebra</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

回答by slob

Here is the short answer if you want to add class to all elements.

如果您想为所有元素添加类，这是一个简短的答案。

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