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

Posted

技术标签:

【中文标题】如何在 v4.0 中向 select2 元素添加类【英文标题】：How to add class to select2 element in v4.0 【发布时间】：2015-08-27 15:25:14 【问题描述】：

这与这个关于如何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"
);

我收到以下错误：

未捕获的错误：没有 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>

【问题讨论】：

【参考方案1】：

Select2 将存储它在原始选择元素上使用的所有信息。您可以通过在原始元素上调用.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>

【讨论】：

欢迎来到 SO！请始终为您的答案提供解释。通常没有解释的答案很难理解，或者你试图表达的观点并不明显。在这种特殊情况下，我还想知道与现有答案相比，这个答案的附加价值...... @nulle，我已经更新了答案以包含一个演示，但 cfi 是非常正确的。我认为您的答案有附加价值，但它几乎被删除，但没有提供有关您在做什么的解释。提示：如果答案中已经有一个工作堆栈 sn-p，您只需单击复制即可回答并调整您正在更新的代码部分。即使这不能替代解释，但它是一个有用的 POC，并迫使您充实答案的缺失部分，例如 .addClass @KyleMit 如果您可以通过$('#my_id').select2(); 获得 对于那些希望定位下拉列表（附加到&lt;body&gt;）的人，您可以以类似的方式访问它：$('#select2').select2().data('select2').$dropdown.addClass("wrap");【参考方案2】：

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

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

根据Migration Guide in the 4.0 Announcement：

如果您使用 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>

【讨论】：

我赞成@walther 的评论，但在那之后我发现我一直没有包含select2.full.js 版本-containerCssClass 不仅在基本模块中可用。跨度> 这只适用于select2-selection。实际的下拉菜单本身呢？ select2-container 这个选项不起作用，我已经尝试过，它没有任何类添加到容器类中。我猜 select2 本身有 bug？ @Codemole，我添加了一些进一步的解释。它应该工作，但可能不清楚如何工作，所以希望能有所帮助 containerCssClass 在 v4 中已重命名为 selectionCssClass。【参考方案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');
  
);

【讨论】：

【参考方案4】：

我们正在为 Select2 使用 React 包装器，因此当前的答案都不适合我们。但是，即使我们无法通过将类添加到基本元素然后使用an adjacent CSS selector 来向容器添加类，我们也能够制作针对容器的 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>

【讨论】：

【参考方案5】：

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

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

【讨论】：

以上是关于如何在 v4.0 中向 select2 元素添加类的主要内容，如果未能解决你的问题，请参考以下文章

如何将特定类添加到 select2 放置元素？

如何在 select2.js v4.0 中显示 ajax 数据？

将类添加到 select2 元素

Select2.js v4.0：如何使用本地数组数据源设置默认选择值？

Select2.js v4.0：如何将过滤文本传输到ajax源数据？

Select2 v4.0.0 性能问题