将类添加到select2元素

Question

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

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

我试过以下没有运气:

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

Answer 1

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.

Answer 2

对于已经初始化的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已满

Answer 3

根据文档,containerCssClass只是一个构造函数属性.你可能做的最好的事情是当你通过以下方式收到错误时重新初始化它:

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

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

Answer 4

对于那些从Google到这里闲逛的人来说，该属性containerCssClass的名称具有误导性，因为它实际上并未向容器元素添加任何类，而是向选择元素添加了任何类。您可以在检查生成的html时看到此内容。

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

$('#my-select').select2({
    theme: "bootstrap myCssClass",
});

Answer 5

使用主题选项.

 $(".select").select2({
        placeholder: "",
        allowClear: false,
        theme: "custom-option-select"
    });