34

文档要么很糟糕，要么我遗漏了一些东西。我正在尝试将错误类添加到 select2 框中以进行表单验证。它只是一个 1px 的红色边框。

我containerCssClass在文档中找到了该方法，但我不确定如何应用它。

我试过以下没有运气：

$("#myBox").select2().containerCssClass('error');
4

8 回答 8

40

jQuery 使用 JSON 对象进行初始化，所以我猜这个也是：\

$("#myBox").select2({ containerCssClass : "error" });

如果您想添加/删除一个类，您可以在初始化后执行此操作

$($("#myBox").select2("container")).addClass("error");
$($("#myBox").select2("container")).removeClass("error");

上述函数获取 select2 主容器的 DOM 节点 例如：$("#myBox").select2("container")

重要
您将需要使用容器方法来获取容器，因为您不会直接编辑 SELECT，但 select2 会生成其他 HTML 来模拟可设置样式的 SELECT。

于 2013-02-22T16:43:14.790 回答
32

对于已经初始化的 select2 元素，我尝试了@Niels 解决方案，但它导致了错误：Uncaught TypeError: Cannot read property 'apply' of undefined

进入源代码，这一直在起作用： 

$($('#myBox').data('select2').$container).addClass('error')
$($('#myBox').data('select2').$container).removeClass('error')

使用select2 v4.0.3 full

于 2016-09-07T13:51:32.303 回答
21

根据文档，containerCssClass只是一个构造函数属性。您可能会做的最好的事情是在通过以下方式收到错误时重新初始化它：

$("#myBox").select2({
    containerCssClass: "error" 
});

注释中的注释：如果你得到Uncaught Error: No select2/compat/containerCss(…)，你需要包含select2.full.js版本而不是基本版本

于 2013-02-22T16:54:34.370 回答
16

对于那些从谷歌浏览到这里的人来说，该属性containerCssClass有一个误导性的名称，因为它实际上并没有向容器元素添加任何类，而是向选择元素添加任何类。当您检查生成的 html 时，您可以看到这一点。

我在这里遇到了一个不错的小技巧，它允许您通过将 css 类添加到theme属性来将其应用于容器，如下所示：

$('#my-select').select2({
    theme: "bootstrap myCssClass",
});
于 2018-10-17T18:47:21.990 回答
5

使用主题选项。

 $(".select").select2({
        placeholder: "",
        allowClear: false,
        theme: "custom-option-select"
    });
于 2016-12-13T06:43:49.257 回答
2

最简单的方法：

创建一个父类，如

<div class="select-error">
    <select id="select2" name="select2" data-required class="form-control">
        <option value="" selected>No selected</option>
        <option value="1">First</option>
        <option value="2">Second</option>
    </select>
</div>

当您使用 jquery 或 php 验证它时，只需将样式或 css 添加到 .select-error 类，如

style="border:1px solid red; border-radius: 4px"

jQuery 示例：

$('[data-required]').each(function() {
  if (!$(this).val()) {
    if ($(this).data('select2')) {
      $('.select-error').css({
        'border': '1px solid red',
        'border-radius': '4px'
      });
    }
  });
于 2016-08-28T21:59:01.160 回答
0

您可以使用 dropdownCssClass 选项

$("#myBox").select2({
    containerCssClass: "error" 
});
于 2016-07-28T04:10:27.143 回答
0

每次单击跨度标记时，select2 都会在正文末尾创建一个带有 select2-container 类的另一个跨度，并且带有选项的下拉列表变得可见，因此您可以使用单击事件并触发添加自定义的函数类到正文末尾的下拉容器以及没有显示下拉列表时的跨度。这完全对我有用。

$($(id).data('select2').$container).addClass("your-custom-class")
$($(id).data('select2').$container).click(() => $.each($("span.select2-container"), (index, value) => {
    if (index === $("span.select2-container").length - 1) {
        $(value).addClass("your-custom-class")
    }
}))
于 2021-01-15T11:18:04.000 回答