Javascript 如何将特定类添加到select2 drop元素?

Javascript 如何将特定类添加到select2 drop元素?,javascript,jquery,css,jquery-select2,Javascript,Jquery,Css,Jquery Select2,我已经选择了通过css定制的带有一般类和ID的select2 现在,我正在尝试自定义一个特定的类,该类将提供给select2,然后在css中应用于它 我的问题:不是select per say,而是附加到正文中的drop(带有类的divselect2 drop),我如何访问该div 我已经试过了: $(".element").select2({ minimumResultsForSearch: -1, containerCssClass : "error" } ); 但是类er

我已经选择了通过css定制的带有一般类和ID的select2

现在,我正在尝试自定义一个特定的类,该类将提供给select2,然后在css中应用于它

我的问题:不是select per say,而是附加到正文中的drop(带有类的divselect2 drop),我如何访问该div

我已经试过了:

$(".element").select2({
   minimumResultsForSearch: -1,
   containerCssClass : "error"
  }
);
但是类
error
不会继承到该div

更新: 这就是我所说的图形元素(选项区域):

这是我想要添加特定类的代码,所以我可以在CSS中使用它:


更新:

这取决于您使用的select2的版本。 其中一个版本中的html结构已更改

以下是小提琴的例子:

我只是把“error”类放在选择框中

.error + .select2-container, 
.error + .select2-container + .select2-container .select2-dropdown {
    border: 3px solid red !important;
}

在早期版本中,下拉列表不靠近选择框(在dom中),因此您必须执行javascript解决方案来直接应用错误类。

您可以使用
dropdownCssClass
将类添加到
select2下拉列表中。我阅读了整个插件以了解发生了什么。最后,我找到了这个选择

 $(".jSelectbox").select2({
     containerCssClass: "error",
     dropdownCssClass: "test"
 });
$(“.jSelectbox”)。选择2({
ContainerCSClass:“错误”,
下拉CSSClass:“测试”
});

阿拉巴马州
阿拉斯加州
亚利桑那州
阿肯色州
加利福尼亚
科罗拉多州
康涅狄格州
特拉华州
佛罗里达州
佐治亚州
夏威夷
爱达荷州
伊利诺伊州
印第安纳州
爱荷华州
堪萨斯州
肯塔基州
路易斯安那州
缅因州
马里兰
马萨诸塞州
密歇根
明尼苏达州
密西西比
密苏里州
蒙大拿
内布拉斯加州
内华达州
新罕布什尔州
新泽西州
新墨西哥州
纽约
北卡罗来纳州
北达科他州
俄亥俄州
奥克拉荷马
俄勒冈
宾夕法尼亚
罗德岛
南卡罗来纳州
南达科他州
得克萨斯州
田纳西州
犹他州
佛蒙特州
弗吉尼亚州
华盛顿
西弗吉尼亚州
威斯康星州
怀俄明州

如果包含
select2.full.js
,则ContainerCSClass
有效。完整版有此选项

可以通过另一种方式进行设置-通过
select2
-(如果不想添加
select2.Full.js
)。像这样使用:

 var select2 = $(".element").select2({/* Select2 Opts */});
嗯。现在将var
选择2
按到控制台(以便于理解),如下所示:

您将看到如下内容:

e {$element: init(1), id: "select2-....", options: e, listeners: Object, dataAdapter: d…}
 $container: init(1)
 $dropdown: init(1) <-- what you need!
 $element: init(1)
 $results: init(1)
 ....

另外,通过
$(select2).data('select2')
您可以访问其他select2元素(容器等)

这是添加类的最简单方法

$(".kt_select2").on('select2:open', function (e) {
    $('body').find('span.select2-dropdown--below').addClass('kt_select_pro');
    $('body').find('ul.select2-results__options').addClass('kt_select_pro');
});

请提供一个演示。@alirezasafian我不知道您想为这样的问题提供什么样的演示,我想在select2中提供一个类,或者在
select2下拉列表中提供一个select2标签中的类,这样我可以更改CSS颜色和内容,但只能更改到该类。您可以使用该类来制作演示。快速解决问题更容易。@alirezasafian@alirezasafian因为我有多种样式可供多种使用。我需要3.5.4版本的解决方案,即使只有JS才有可能。我建议您将指向该版本的链接放在小提琴上,因为不是每个人都会有副本。@Jimmy这能解决你的问题吗?这正是我想要的:)花了一段时间才得到这个答案。。。谢谢你的帮助@吉米,不客气。顺便说一下,您可以使用此选择器
.error+.select2 drop
。祝你好运。没有一个解决方案有效????我将我的select2改为select2 full仍然没有用select2官方网站没有提到这个选项。这种方法有效,但只适用于每个select2。因此,您需要通过selects调用
each(function(){}
,然后调用
select2.data('select2')。$dropdown.addClass(“…”);
select2.data('select2').$dropdown.addClass("...");
$(".select").select2({
  selectionCssClass: "my-class-section",
  dropdownCssClass: "my-class-drop"
});
$(".kt_select2").on('select2:open', function (e) {
    $('body').find('span.select2-dropdown--below').addClass('kt_select_pro');
    $('body').find('ul.select2-results__options').addClass('kt_select_pro');
});