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

Question

这与关于如何add class to select2 element的这个问题非常相似，但是那里的答案似乎针对的是早期版本的框架，它在v4.0中经历了一些重大变化

根据此issue to add an additional custom class to select2-container，您可以将几个未记录的属性传递给select2构造函数，包括：containerCss，containerCssClass，dropdownCss和{{1} }。

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

dropdownCssClass

我收到以下错误：

  

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

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

以下是StackSnippets中的示例：

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

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

Answer 1

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

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

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

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

这是Stack Snippets

中的一个演示

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

根据Migration Guide in the 4.0 Announcement：

  

如果您使用Select2的完整版（ select2.full.js ），则会在某些情况下使用兼容性模块，以确保您的代码仍然表现得如此期待。

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

然而，Select2并不是很容易定义一个＆＃34;容器＆＃34;是你希望找到的地方。

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

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

＆＃13;

＆＃13;

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

＆＃13;

select {
  width: 200px;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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，即使我们无法通过将类添加到基本元素，然后使用an adjacent CSS selector来添加类：

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

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

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