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

问题描述

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

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-容器添加其他自定义类，您可以将几个未公开的属性传递给select2构造函数，包括:containerCss，containerCssClass，dropdownCss和dropdownCssClass.

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.

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

However in version 4 when I run the following code:

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

我收到以下错误:

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

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

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

推荐答案

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

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:

从那里，您可以访问$container属性以标识DOM中的容器，并向该容器添加类，如下所示:

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

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

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

这是堆栈片段中的一个演示

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>

这篇关于如何在v4.0中将类添加到select2元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！