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 full

Answer 3

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

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

注释注释：如果您收到未捕获错误：否select2 / compat / containerCss（...），则需要包含select2.full.js版本而不是基本版本

Answer 4

使用主题选项。

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

Answer 5

对于那些从Google到这里闲逛的人来说，属性import matplotlib.pyplot as plt from mpl_toolkits import mplot3d ax = plt.axes(projection='3d') ax.set_xlabel('c') ax.set_ylabel('b') ax.set_zlabel('a') names = ["file1.txt", "file2.txt", "file3.txt", "file4.txt", "file5.txt", "file6.txt"] a=[] b=[] c=[] for n in names: f = open(n, 'r') tit = f.readline() for row in f: Data = row.split() a.append(float(Data[0])) b.append(float(Data[1])) c.append(float(Data[2])) f.close() ax.plot3D(c,b,a, label = tit) plt.show()的名称具有误导性，因为它实际上并未向容器元素添加任何类，而是向选择元素添加了任何类。您可以在检查生成的html时看到此内容。

我遇到了一个不错的小技巧here，通过将其添加到containerCssClass属性中，您可以将CSS类应用于容器，就像这样：

theme

Answer 6

最简单的方法：

创建像

这样的父类

<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'
      });
    }
  });

Answer 7

您可以使用dropdownCssClass opiton

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

Answer 8

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

$($(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")
    }
}))

将类添加到select2元素

8 个答案: