如何在v4.0中向select2元素添加类
这与关于如何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"
});我得到以下错误：
未捕获错误:未选择2/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>
回答 5
Stack Overflow用户
发布于 2015-09-21 18:23:07
Select2将存储它在原始select元素上使用的所有信息。您可以通过在原始元素上调用.data('select2')来访问以下信息：
在那里，您可以访问$container属性来标识DOM中的容器，并将类添加到其中，如下所示：
var $select2 = $('select.select2').select2()
$select2.data('select2').$container.addClass("wrap")下面是Stack代码片段中的演示
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>
Stack Overflow用户
发布于 2015-06-12 03:16:31
可以使用以下选项将类添加到容器(选择)或dropdown (选项)：
$('.select2').select2({
containerCssClass: "custom-container",
dropdownCssClass: "custom-dropdown",
});根据Migration Guide in the 4.0 Announcement的说法
如果您使用的是full build of Select2 (select2.full.js)兼容性模块，那么在某些情况下将使用兼容性模块来确保您的代码仍然按照预期的方式运行。
根据Configuration Docs，可以传递以下选项：
然而，Select2并不擅长定义什么是“容器”以及您期望在哪里找到它。
下面是一些高级html结构的分解，以及自定义类出现的位置：
这是一个正在运行的演示，它将自定义类输出到容器和下拉包装器，然后使用它们来设置每个部分的颜色(只是为了证明它们是被插入的)
$('.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>
Stack Overflow用户
发布于 2015-08-24 05:44:40
找到了添加类的方法。有同样的问题，找不到方法，我自己做的，所以就是这样：
$('.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');
}
});https://stackoverflow.com/questions/30789158
复制相似问题
腾讯云开发者
