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

Question

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

根据这个问题,以添加额外的自定义类来选择2容器,有几个无证属性,你可以传递给选择2的构造,包括:containerCss,containerCssClass,dropdownCss,和dropdownCssClass.

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

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

我收到以下错误:

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

如何在v4.0中将类传递给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

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

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

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

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

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

因此,以下库更改应该有效:

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

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

但是,如果不使用full.js,知道是否有"正确"的方法来处理它仍然是一件好事