v4.0中select2元素如何添加class

Question

这与关于如何 add class to select2 element 的问题非常相似，但是那里的答案似乎针对框架的早期版本，该框架在 v4.0

中进行了一些重大更改

根据这个 issue to add an additional custom class to select2-container，有几个未记录的属性可以传递给 select2 构造函数，包括：containerCss、containerCssClass、dropdownCss 和 dropdownCssClass.

然而在版本4的时候我运行下面的代码：

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

我收到以下错误：

Uncaught Error: No select2/compat/containerCss

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

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

Answer 1

您可以使用以下选项将class添加到容器（选择）或下拉列表（选项）：

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

根据 Migration Guide in the 4.0 Announcement:

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

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

但是，Select2 不能很好地定义 "container" 是什么以及您期望找到它的位置。

这是一些高级 html 结构的细分以及自定义 classes 出现的位置：

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

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

Answer 2

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

$('.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 3

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

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

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

<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>

Answer 4

我们正在为 Select2 使用 React 包装器，因此 none 当前答案对我们有用。但是，即使我们无法通过将 class 添加到基本元素，然后使用 an adjacent CSS selector 来向容器添加 class，我们仍然能够创建以容器为目标的 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>

Answer 5

如果您想将 class 添加到所有元素，这里是简短的答案。

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

v4.0中select2元素如何添加class

How to add class to select2 element in v4.0

javascript

jquery

jquery-select2

这是 Stack Snippets 中的一个演示