blocks|key|1671021|text|这将取决于您正在使用的select2版本。html结构在其中一个版本中发生了更改。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1671022|下面是Fiddle示例：https://jsfiddle.net/LpjcqbLu/|offset|length|1671023|我只是将“error”类放在选择框中。|1671024|.error+%2B+.select2-container,+
.error+%2B+.select2-container+%2B+.select2-container+.select2-dropdown+{
++++border:+3px+solid+red+!important;
}|code-block|syntax|javascript|1671025|在早期版本中，下拉列表并不接近选择框(在dom中)，因此您必须执行javascript解决方案才能直接应用error类。|1671026|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/LpjcqbLu/^0|0|C|U|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

It will depend on the version of select2 that you are using.
The html structure changed in one of the versions. 

Here is Fiddle example:
<a href="https://jsfiddle.net/LpjcqbLu/" rel="nofollow">https://jsfiddle.net/LpjcqbLu/</a>

I just put the 'error' class on the select box.

<pre><code>.error + .select2-container, 
.error + .select2-container + .select2-container .select2-dropdown {
 border: 3px solid red !important;
}
</code></pre>

In earlier versions, the dropdown was not close to the select box (in the dom), so you would have to do a javascript solution to apply the error class directly.

blocks|key|1066714|text|您可以使用dropdownCssClass向select2-drop添加类。我阅读了整个插件来了解正在发生的事情。最后，我找到了这个选择。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1066715|+$(".jSelectbox").select2({
+++++containerCssClass:+"error",
+++++dropdownCssClass:+"test"
+});|code-block|syntax|javascript|1066716|Update：如果它不起作用，尝试以下操作(方法2)：|BOLD|1066717|$select+=+$(".jSelectbox").select2({});
$select.data('select2').$container.addClass('error');
$select.data('select2').$dropdown.addClass('test');|1066718|​|1066719|$(".jSelectbox").select2({
++containerCssClass:+"error",
++dropdownCssClass:+"test"
});|1066720|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link+href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css"+rel="stylesheet"+/>
<script+src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<select+class="jSelectbox">
++++++++++++<option+value="AL">Alabama</option>
++++++++++++<option+value="AK">Alaska</option>
++++++++++++<option+value="AZ">Arizona</option>
++++++++++++<option+value="AR">Arkansas</option>
++++++++++++<option+value="CA">California</option>
++++++++++++<option+value="CO">Colorado</option>
++++++++++++<option+value="CT">Connecticut</option>
++++++++++++<option+value="DE">Delaware</option>
++++++++++++<option+value="FL">Florida</option>
++++++++++++<option+value="GA">Georgia</option>
++++++++++++<option+value="HI">Hawaii</option>+++++++++++++++++++
++++++++++++<option+value="ID">Idaho</option>
++++++++++++<option+value="IL">Illinois</option>
++++++++++++<option+value="IN">Indiana</option>
++++++++++++<option+value="IA">Iowa</option>
++++++++++++<option+value="KS">Kansas</option>
++++++++++++<option+value="KY">Kentucky</option>
++++++++++++<option+value="LA">Louisiana</option>
++++++++++++<option+value="ME">Maine</option>
++++++++++++<option+value="MD">Maryland</option>
++++++++++++<option+value="MA">Massachusetts</option>
++++++++++++<option+value="MI">Michigan</option>
++++++++++++<option+value="MN">Minnesota</option>
++++++++++++<option+value="MS">Mississippi</option>
++++++++++++<option+value="MO">Missouri</option>
++++++++++++<option+value="MT">Montana</option>
++++++++++++<option+value="NE">Nebraska</option>
++++++++++++<option+value="NV">Nevada</option>
++++++++++++<option+value="NH">New+Hampshire</option>
++++++++++++<option+value="NJ">New+Jersey</option>
++++++++++++<option+value="NM">New+Mexico</option>
++++++++++++<option+value="NY">New+York</option>
++++++++++++<option+value="NC"+selected="">North+Carolina</option>
++++++++++++<option+value="ND">North+Dakota</option>
++++++++++++<option+value="OH">Ohio</option>
++++++++++++<option+value="OK">Oklahoma</option>
++++++++++++<option+value="OR">Oregon</option>
++++++++++++<option+value="PA">Pennsylvania</option>
++++++++++++<option+value="RI">Rhode+Island</option>
++++++++++++<option+value="SC">South+Carolina</option>
++++++++++++<option+value="SD">South+Dakota</option>
++++++++++++<option+value="TX">Texas</option>
++++++++++++<option+value="TN">Tennessee</option>
++++++++++++<option+value="UT">Utah</option>
++++++++++++<option+value="VT">Vermont</option>
++++++++++++<option+value="VA">Virginia</option>
++++++++++++<option+value="WA">Washington</option>
++++++++++++<option+value="WV">West+Virginia</option>
++++++++++++<option+value="WI">Wisconsin</option>
++++++++++++<option+value="WY">Wyoming</option>
++++++++++++</select>|1066721|1066722|小提琴手|1066723|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/wcu23e7m/2/^0|5|G|M|C|0|0|0|6|0|0|0|0|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1C|8|@$9|1D|A|1E|B|M]]|D|@]|E|$]]|$1|N|3|O|5|H|7|1F|8|@]|D|@]|E|$I|J]]|$1|P|3|Q|5|6|7|1G|8|@]|D|@]|E|$]]|$1|R|3|S|5|H|7|1H|8|@]|D|@]|E|$I|J]]|$1|T|3|U|5|H|7|1I|8|@]|D|@]|E|$I|J]]|$1|V|3|Q|5|6|7|1J|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|1K|8|@]|D|@$9|1L|A|1M|1|1N]]|E|$]]|$1|Y|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15]]]]

You can use <code>dropdownCssClass</code> for adding class to the <code>select2-drop</code>. I read whole plugin to understand what is going on. Finally, I found that option.
<pre><code> $(&quot;.jSelectbox&quot;).select2({
 containerCssClass: &quot;error&quot;,
 dropdownCssClass: &quot;test&quot;
 });
</code></pre>
Update: If it didn't work, try this (way 2):
<pre><code>$select = $(&quot;.jSelectbox&quot;).select2({});
$select.data('select2').$container.addClass('error');
$select.data('select2').$dropdown.addClass('test');
</code></pre>
<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(".jSelectbox").select2({
 containerCssClass: "error",
 dropdownCssClass: "test"
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet" /&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"&gt;&lt;/script&gt;
&lt;select class="jSelectbox"&gt;
 &lt;option value="AL"&gt;Alabama&lt;/option&gt;
 &lt;option value="AK"&gt;Alaska&lt;/option&gt;
 &lt;option value="AZ"&gt;Arizona&lt;/option&gt;
 &lt;option value="AR"&gt;Arkansas&lt;/option&gt;
 &lt;option value="CA"&gt;California&lt;/option&gt;
 &lt;option value="CO"&gt;Colorado&lt;/option&gt;
 &lt;option value="CT"&gt;Connecticut&lt;/option&gt;
 &lt;option value="DE"&gt;Delaware&lt;/option&gt;
 &lt;option value="FL"&gt;Florida&lt;/option&gt;
 &lt;option value="GA"&gt;Georgia&lt;/option&gt;
 &lt;option value="HI"&gt;Hawaii&lt;/option&gt; 
 &lt;option value="ID"&gt;Idaho&lt;/option&gt;
 &lt;option value="IL"&gt;Illinois&lt;/option&gt;
 &lt;option value="IN"&gt;Indiana&lt;/option&gt;
 &lt;option value="IA"&gt;Iowa&lt;/option&gt;
 &lt;option value="KS"&gt;Kansas&lt;/option&gt;
 &lt;option value="KY"&gt;Kentucky&lt;/option&gt;
 &lt;option value="LA"&gt;Louisiana&lt;/option&gt;
 &lt;option value="ME"&gt;Maine&lt;/option&gt;
 &lt;option value="MD"&gt;Maryland&lt;/option&gt;
 &lt;option value="MA"&gt;Massachusetts&lt;/option&gt;
 &lt;option value="MI"&gt;Michigan&lt;/option&gt;
 &lt;option value="MN"&gt;Minnesota&lt;/option&gt;
 &lt;option value="MS"&gt;Mississippi&lt;/option&gt;
 &lt;option value="MO"&gt;Missouri&lt;/option&gt;
 &lt;option value="MT"&gt;Montana&lt;/option&gt;
 &lt;option value="NE"&gt;Nebraska&lt;/option&gt;
 &lt;option value="NV"&gt;Nevada&lt;/option&gt;
 &lt;option value="NH"&gt;New Hampshire&lt;/option&gt;
 &lt;option value="NJ"&gt;New Jersey&lt;/option&gt;
 &lt;option value="NM"&gt;New Mexico&lt;/option&gt;
 &lt;option value="NY"&gt;New York&lt;/option&gt;
 &lt;option value="NC" selected=""&gt;North Carolina&lt;/option&gt;
 &lt;option value="ND"&gt;North Dakota&lt;/option&gt;
 &lt;option value="OH"&gt;Ohio&lt;/option&gt;
 &lt;option value="OK"&gt;Oklahoma&lt;/option&gt;
 &lt;option value="OR"&gt;Oregon&lt;/option&gt;
 &lt;option value="PA"&gt;Pennsylvania&lt;/option&gt;
 &lt;option value="RI"&gt;Rhode Island&lt;/option&gt;
 &lt;option value="SC"&gt;South Carolina&lt;/option&gt;
 &lt;option value="SD"&gt;South Dakota&lt;/option&gt;
 &lt;option value="TX"&gt;Texas&lt;/option&gt;
 &lt;option value="TN"&gt;Tennessee&lt;/option&gt;
 &lt;option value="UT"&gt;Utah&lt;/option&gt;
 &lt;option value="VT"&gt;Vermont&lt;/option&gt;
 &lt;option value="VA"&gt;Virginia&lt;/option&gt;
 &lt;option value="WA"&gt;Washington&lt;/option&gt;
 &lt;option value="WV"&gt;West Virginia&lt;/option&gt;
 &lt;option value="WI"&gt;Wisconsin&lt;/option&gt;
 &lt;option value="WY"&gt;Wyoming&lt;/option&gt;
 &lt;/select&gt;</code></pre>
</div>
</div>

<a href="http://jsfiddle.net/wcu23e7m/2/" rel="noreferrer">Jsfiddle</a>

blocks|key|2226629|text|如果您包含了containerCssClass，那么select2.full.js就能工作。完整版本有此选项。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2226630|entityMap^0|6|H|Q|F|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<code>containerCssClass</code> works if you include <code>select2.full.js</code>. Full version has this option

blocks|key|2226640|text|它有可能以另一种方式-通过数据-*的select2+-(如果不想添加select2.full.js)。如其所用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2226641|+var+select2+=+$(".element").select2({/*+Select2+Opts+*/});|code-block|syntax|javascript|2226642|好的。现在将var+select2推到控制台(用于理解)，如：|2226643|+console.log($(select2).data('select2'));|2226644|你会看到这样的东西：|2226645|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)
+....|2226646|好的，现在只需将指定的类(-es)以相同的方式添加到select2's+dropdown中：|2226647|select2.data('select2').$dropdown.addClass("...");|2226648|此外，通过$(select2).data('select2')，您可以访问其他select2元素(容器等)。|2226649|entityMap^0|I|7|Y|F|0|0|A|7|0|0|0|0|Q|I|0|0|5|Q|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1A|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|U|3|V|5|H|7|1F|8|@]|D|@]|E|$I|J]]|$1|W|3|X|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|Z|$]]

It's possible to make it in another way - via data-* of <code>select2</code> - (if don't want to add <code>select2.full.js</code>). Use like it: 

<pre><code> var select2 = $(".element").select2({/* Select2 Opts */});
</code></pre>

Ok. Now push var <code>select2</code> to console ( for understanding) like:

<pre><code> console.log($(select2).data('select2'));
</code></pre>

You will see something like this:

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

Ok, now just add specified class(-es) to <code>select2's dropdown</code> in the same way: 

<pre><code>select2.data('select2').$dropdown.addClass("...");
</code></pre>

Also, via <code>$(select2).data('select2')</code> you have access to others select2 elements (container, etc.).

blocks|key|2226653|text|$(".select").select2({
++selectionCssClass:+"my-class-section",
++dropdownCssClass:+"my-class-drop"
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2226654|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$(&quot;.select&quot;).select2({
 selectionCssClass: &quot;my-class-section&quot;,
 dropdownCssClass: &quot;my-class-drop&quot;
});
</code></pre>

blocks|key|2226702|text|这是添加类的最简单方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2226703|$(".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');
});|code-block|syntax|javascript|2226704|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

this is Easiest way to add class
<pre><code>$(&quot;.kt_select2&quot;).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');
});
</code></pre>

blocks|key|2226740|text|使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2226741|$(".select").select2({
dropdownCssClass:+"my-class-dropdown"
});|code-block|syntax|javascript|2226742|是解决这一问题的最佳方法，并能在课堂上参考下课。通常，您需要使用的是select2.full.min.js而不是select2.min.js。但是，对于那些不希望从select2.min.js转换到select2.full.min.js的人，我已经附加了一个select2.min.js的稍微修改过的select2.min.js版本+v4.0.13+(截至2022年6月22日的稳定版本)，并提供了功能齐全的dropdownCssClass。这应该可以避免人们在这个小问题上切换到select2.full.min.js的麻烦。|offset|length|style|BOLD|2226743|同时，考虑使用":all:“。这将给出下拉列表中的所有类，它们位于原始的select元素中。|2226744|$(".select").select2({
dropdownCssClass:+":all:"
});|2226745|entityMap|0|LINK|mutability|MUTABLE|url|https://www.dropbox.com/s/6bwx0oqhratcls5/select2.min.js?dl=0|1|https://select2.org/configuration/options-api^0|0|0|R|17|40|M|0|0|F|V|1|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@$I|13|J|14|K|L]]|9|@$I|15|J|16|1|17]]|A|$]]|$1|M|3|N|5|6|7|18|8|@]|9|@$I|19|J|1A|1|1B]]|A|$]]|$1|O|3|P|5|D|7|1C|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

Using
<pre><code>$(&quot;.select&quot;).select2({
dropdownCssClass: &quot;my-class-dropdown&quot;
});
</code></pre>
is the best way of solving this problem, and being able to reference the dropdown by class. Usually, you need to be using select2.full.min.js instead of select2.min.js. However, for those not looking to transition from select2.min.js to select2.full.min.js, I have attached a <a href="https://www.dropbox.com/s/6bwx0oqhratcls5/select2.min.js?dl=0" rel="nofollow noreferrer">slightly modified version of select2.min.js</a> v4.0.13 (current stable release as of June 22 2022) of select2.min.js, with fully functional dropdownCssClass. This should save people the hassle of switching to select2.full.min.js over this minor issue.
Also, consider using &quot;:all:&quot;. <a href="https://select2.org/configuration/options-api" rel="nofollow noreferrer">This will give the dropdown all classes which are in the original select element</a>
<pre><code>$(&quot;.select&quot;).select2({
dropdownCssClass: &quot;:all:&quot;
});
</code></pre>

I have select2 customized via css with its general classes and ids.

Now, I'm trying to customize a specific class that will be provided to select2 and then apply in css to it. 

My issue: is NOT the select per say but the drop of it ( the div with the class select2-drop ) that is appended to the body, how can i access that one?

I've already tried:

<pre><code>$(".element").select2({
 minimumResultsForSearch: -1,
 containerCssClass : "error"
 }
);
</code></pre>

but the class <code>error</code> is not inherited to that div.

UPDATE:
This is the graphic element i'm talking about ( the options area ):

<a href="https://i.stack.imgur.com/Kp1p4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Kp1p4.png" alt="enter image description here"></a>

And this is the code in the inspected where i want to add that specific class, so i can play with it in CSS:

<a href="https://i.stack.imgur.com/SeSmL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/SeSmL.png" alt="enter image description here"></a>

UPDATE: <a href="http://jsfiddle.net/wcu23e7m/1/" rel="noreferrer">jsfiddle</a>

How to add a specific class to select2 drop element?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我通过css定制了select2和它的一般类和I。现在，我正在尝试自定义一个将提供给select2的特定类，然后在css中应用到它。我的问题是:不是select per说，而是它的下降(类select2- drop 的div )被追加到主体，我如何访问这个对象？我已经试过了$(".element").select2({...

问如何向select2 drop元素添加特定的类？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何向select2 drop元素添加特定的类？EN