将类添加到 select2 元素

Posted 2023-05-07

【中文标题】将类添加到 select2 元素

【英文标题】：Add class to select2 element

【发布时间】：2013-02-08 08:31:22

【问题描述】：

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

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

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

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

【问题讨论】：

知道#myBox到底是什么真的很有用??????是select对象还是后续创建的select2 span元素？？？？

【参考方案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。

【讨论】：

您的第一个建议对我不起作用。对于第二个，如果您在页面上使用单个类进行多个选择，则需要遍历所有选择以将所需的类添加到每个选择中。做$($(".myclass").select2("container")).addClass("error") 是行不通的。

注意你必须使用完整版：github.com/select2/select2/issues/3302

我收到Uncaught TypeError: Cannot read property 'apply' of undefined 用于第二次使用，仅用于$('#myBox').select2('container')

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

【参考方案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 完整版

【讨论】：

谢谢，你的解决方案救了我的命

如果您正在寻找 containerCssClass 添加类的实际元素，它是 $selection 而不是 $container。

【参考方案3】：

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

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

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

【讨论】：

感谢建议添加 select2.full.js

@Samsquanch 我在哪里可以下载完整版？我好像没找到。

Nvmd，我从 Nuget 下载的，基本上是旧版

最佳答案，需要参考select2.full.js而不是基本的。

【参考方案4】：

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

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

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

【讨论】：

如果您想保留默认类并在其上添加自定义类，您可以尝试类似：theme:"default your-custom-class"

【参考方案5】：

使用主题选项。

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

【参考方案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'
      );
    
  );

【讨论】：

虽然没有准确回答这个问题，但我很确定这是大多数观众真正需要的

但是如果我有 2 个不同的选择，这也会影响第二个选择并将其更改为红色边框

【参考方案7】：

你可以使用 dropdownCssClass 选项

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

【参考方案8】：

每次单击 span 标签时，select2 都会在正文末尾创建一个带有 select2-container 类的另一个 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")
    
))