Jquery 将类添加到select2元素

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

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

我尝试了以下方法，但没有成功：

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

---

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

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

如果您想添加/删除一个类，可以在初始化它之后进行

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

上述函数获取select2主容器的DOM节点，例如：$myBox.select2container

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

根据，containercsclass只是一个构造函数属性。当您通过以下方式获得错误时，您可能能做的最好的事情就是重新初始化它：

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

---

备注：如果出现未捕获错误：No select2/compat/containerCss…，则需要包含该版本而不是基本版本

您可以使用dropdownCssClass opiton

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

最简单的方法：

创建一个父类，如

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

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

---

对于已经初始化的select2元素，我尝试了@Niels解决方案，但它导致了一个错误：Uncaught TypeError:无法读取未定义的属性“apply”

已进入源代码，但此操作一直有效：

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

使用select2v4.0.3full

使用主题选项

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

---

对于那些从google来到这里的人来说，ContainerCSClass属性有一个误导性的名称，因为它实际上并没有向container元素添加任何类，而是向selection元素添加任何类。您可以在检查生成的html时看到这一点

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

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

---

每次单击span标记时，select2将在正文的末尾创建另一个带有select2容器类的span，带有选项的下拉列表将变为可见，因此，您可以使用click事件并触发一个函数，该函数将自定义类添加到正文末尾的下拉列表容器中，并在没有显示下拉列表时添加范围。这对我来说很有效

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

---

你的第一个建议对我不起作用。对于第二个，如果页面上有多个选择，并且只有一个类，则需要遍历所有选择，以向每个选择添加所需的类。执行$$.myclass.select2container.addClasserror将不起作用。请注意，您必须使用完整版本：我正在获取未捕获的TypeError:无法读取未定义的属性“apply”，仅用于$'myBox。如果未捕获错误，请选择2'container:否select2/compat/containerCss…，您需要包括select2.full.js版本，而不是基本版本，但不能准确回答问题，我很确定这是大多数观众实际需要的，但如果我有两个不同的选择，这也会影响第二个选择，并将其更改为红色边框。感谢您建议添加select2.full。js@Samsquanch我在哪里下载完整版本？我似乎找不到它。Nvmd，我从Nuget下载的，基本上是legacyBest答案，需要引用select2.full.js而不是基本的。这是可行的，但领先的$。。。是多余的，因为$container已经是一个jquery元素谢谢，你的解决方案拯救了我的生命如果你在寻找CONTAINERCSCLASS将类添加到的实际元素，它是$selection而不是$container。@SoufianeGhzal:不，您需要使用$container而不是container。了解myBox到底是什么将非常有用？？？？？？是选择对象还是随后创建的select2 span元素？？？？？如果要保留默认类并在其上添加自定义类，可以尝试以下操作：主题：默认自定义类