blocks|key|2697695|text|可以使用以下选项将类添加到容器(选择)或dropdown+(选项)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2697696|$('.select2').select2({
++++containerCssClass:+"custom-container",
++++dropdownCssClass:+"custom-dropdown",
});|code-block|syntax|javascript|2697697|根据Migration+Guide+in+the+4.0+Announcement的说法|2697698|2697699|如果您使用的是full+build+of+Select2+(select2.full.js)兼容性模块，那么在某些情况下将使用兼容性模块来确保您的代码仍然按照预期的方式运行。|blockquote|2697700|2697701|2697702|根据Configuration+Docs，可以传递以下选项：|2697703|​|2697704|📷|atomic|2697705|2697706|然而，Select2并不擅长定义什么是“容器”以及您期望在哪里找到它。|2697707|下面是一些高级html结构的分解，以及自定义类出现的位置：|2697708|2697709|2697710|2697711|这是一个正在运行的演示，它将自定义类输出到容器和下拉包装器，然后使用它们来设置每个部分的颜色(只是为了证明它们是被插入的)|2697712|2697713|$('.select2').select2({
++++containerCssClass:+"custom-container",
++++dropdownCssClass:+"custom-dropdown",
});|2697714|select+{
++width:+200px;
}

.custom-container+span+{
++color:+blue!important;
}
.custom-dropdown+{
++color:+red;
}|2697715|<link+href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css"+rel="stylesheet"/>
<script+src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script+src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>

<select+class="select2">
++<option+value="AL">Algebra</option>
++<option+value="AK">Alaska</option>
++<option+value="AZ">Arizona</option>
</select>|2697716|2697717|entityMap|0|LINK|mutability|MUTABLE|url|https://select2.github.io/announcements-4.0.html|1|https://select2.org/configuration/options-api|2|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/3616e9c28cc4227082361f12d0f18bc5.png|imageAlt|3|https://ask.qcloudimg.com/http-save/yehe-900000/dd937b716a527ae6313b1019c30bd2b4.png^0|D|2|K|8|0|0|2|13|0|0|0|7|A|0|0|0|2|I|1|0|0|0|1|2|0|0|0|0|0|0|1|3|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1Z|8|@$9|20|A|21|B|C]|$9|22|A|23|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|24|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|25|8|@]|D|@$9|26|A|27|1|28]]|E|$]]|$1|M|3|-4|5|6|7|29|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|2A|8|@$9|2B|A|2C|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|2D|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|2E|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|2F|8|@]|D|@$9|2G|A|2H|1|2I]]|E|$]]|$1|U|3|V|5|6|7|2J|8|@]|D|@]|E|$]]|$1|W|3|X|5|Y|7|2K|8|@]|D|@$9|2L|A|2M|1|2N]]|E|$]]|$1|Z|3|V|5|6|7|2O|8|@]|D|@]|E|$]]|$1|10|3|11|5|6|7|2P|8|@]|D|@]|E|$]]|$1|12|3|13|5|6|7|2Q|8|@]|D|@]|E|$]]|$1|14|3|V|5|6|7|2R|8|@]|D|@]|E|$]]|$1|15|3|X|5|Y|7|2S|8|@]|D|@$9|2T|A|2U|1|2V]]|E|$]]|$1|16|3|V|5|6|7|2W|8|@]|D|@]|E|$]]|$1|17|3|18|5|6|7|2X|8|@]|D|@]|E|$]]|$1|19|3|V|5|6|7|2Y|8|@]|D|@]|E|$]]|$1|1A|3|1B|5|H|7|2Z|8|@]|D|@]|E|$I|J]]|$1|1C|3|1D|5|H|7|30|8|@]|D|@]|E|$I|J]]|$1|1E|3|1F|5|H|7|31|8|@]|D|@]|E|$I|J]]|$1|1G|3|V|5|6|7|32|8|@]|D|@]|E|$]]|$1|1H|3|-4|5|6|7|33|8|@]|D|@]|E|$]]]|1I|$1J|$5|1K|1L|1M|E|$1N|1O]]|1P|$5|1K|1L|1M|E|$1N|1Q]]|1R|$5|1S|1L|1T|E|$1U|1V|1W|-4]]|1X|$5|1S|1L|1T|E|$1U|1Y|1W|-4]]]]

<p>You can use the following options to add a class to the <strong>container</strong> (<em>selection</em>) or <strong>dropdown</strong> (<em>options</em>): </p>

<pre class="lang-js prettyprint-override"><code>$('.select2').select2({
    containerCssClass: "custom-container",
    dropdownCssClass: "custom-dropdown",
});
</code></pre>

<p>According to the <a href="https://select2.github.io/announcements-4.0.html" rel="noreferrer">Migration Guide in the 4.0 Announcement</a>:</p>

<blockquote>
  <p>If you use the <strong>full build</strong> of Select2 (<em>select2.full.js</em>) compatibility modules will be used in some cases to ensure that your code still behaves how you were expecting.</p>
</blockquote>

<p>According to the <a href="https://select2.org/configuration/options-api" rel="noreferrer">Configuration Docs</a>, the following options can be passed:</p>

<p><a href="https://select2.org/configuration/options-api" rel="noreferrer"><img src="https://i.stack.imgur.com/jJrc1.png" alt="Configuration Docs"></a></p>

<p>However, Select2 isn't great about defining what a "container" is and where you'd expect to find it.</p>

<p>Here's a breakdown of some of high level html structures and where the custom classes show up:</p>

<p><a href="https://i.stack.imgur.com/bkuFB.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bkuFB.png" alt="Select2 Container vs Dropdown"></a></p>

<p>Here's a running demo that outputs the custom classes to the container and dropdown wrappers and then uses them to style the color of each section (just to prove they're being inserted)</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.select2').select2({
    containerCssClass: "custom-container",
    dropdownCssClass: "custom-dropdown",
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>select {
  width: 200px;
}

.custom-container span {
  color: blue!important;
}
.custom-dropdown {
  color: red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/&gt;
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"&gt;&lt;/script&gt;
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"&gt;&lt;/script&gt;

&lt;select class="select2"&gt;
  &lt;option value="AL"&gt;Algebra&lt;/option&gt;
  &lt;option value="AK"&gt;Alaska&lt;/option&gt;
  &lt;option value="AZ"&gt;Arizona&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2909883|text|找到了添加类的方法。有同样的问题，找不到方法，我自己做的，所以就是这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2909884|$('.select2').on('click',function(){
++var+matchBlock+=+$(this).prev();
++if(matchBlock.hasClass('select-control-left')){
++++$('.select2-dropdown').addClass('blue-select');
++}
++else{
+++++$('.select2-dropdown').addClass('orange-select');
++}
});|code-block|syntax|javascript|2909885|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|$]]

<p>Found a way to add a class.
had the same problem couldnt find a way and made it myself, so here it is: </p>

<pre><code>$('.select2').on('click',function(){
  var matchBlock = $(this).prev();
  if(matchBlock.hasClass('select-control-left')){
    $('.select2-dropdown').addClass('blue-select');
  }
  else{
     $('.select2-dropdown').addClass('orange-select');
  }
});
</code></pre>


blocks|key|2909998|text|Select2将存储它在原始select元素上使用的所有信息。您可以通过在原始元素上调用.data('select2')来访问以下信息：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2909999|​|2910000|📷|atomic|2910001|2910002|在那里，您可以访问$container属性来标识DOM中的容器，并将类添加到其中，如下所示：|2910003|var+$select2+=+$('select.select2').select2()

$select2.data('select2').$container.addClass("wrap")|code-block|syntax|javascript|2910004|下面是Stack代码片段中的演示|2910005|2910006|var+$select2+=+$('select.select2').select2()
$select2.data('select2').$container.addClass("wrap")|2910007|body+.select2.narrow+{
++++width:+200px;
}
body+.wrap+.select2-selection--single+{
++++height:+100%25;
}
body+.select2-container.wrap+.select2-selection--single+.select2-selection__rendered+{
++++word-wrap:+break-word;
++++text-overflow:+inherit;
++++white-space:+normal;
}|2910008|<link+href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css"+rel="stylesheet"/>
<script+src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script+src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>

<select+class="select2+narrow+wrap">
++<option+value="AL">Really+long+name+that+normally</option>
++<option+value="AK">Alaska</option>
++<option+value="AZ">Arizona</option>
</select>|2910009|2910010|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/ec086d4de9dca5640d5d82b9522c39ba.png|imageAlt^0|18|G|0|0|0|1|0|0|0|9|A|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1E|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1F|8|@]|D|@$9|1G|A|1H|1|1I]]|E|$]]|$1|K|3|G|5|6|7|1J|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1K|8|@$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|N|3|O|5|P|7|1N|8|@]|D|@]|E|$Q|R]]|$1|S|3|T|5|6|7|1O|8|@]|D|@]|E|$]]|$1|U|3|G|5|6|7|1P|8|@]|D|@]|E|$]]|$1|V|3|W|5|P|7|1Q|8|@]|D|@]|E|$Q|R]]|$1|X|3|Y|5|P|7|1R|8|@]|D|@]|E|$Q|R]]|$1|Z|3|10|5|P|7|1S|8|@]|D|@]|E|$Q|R]]|$1|11|3|G|5|6|7|1T|8|@]|D|@]|E|$]]|$1|12|3|-4|5|6|7|1U|8|@]|D|@]|E|$]]]|13|$14|$5|15|16|17|E|$18|19|1A|-4]]]]

<p>Select2 will store all the information it uses on the original select element.  You can access the following information by calling <code>.data('select2')</code> on the original element:</p>

<p><a href="https://i.stack.imgur.com/tmf3A.png" rel="noreferrer"><img src="https://i.stack.imgur.com/tmf3A.png" alt="Select2 Data"></a></p>

<p>From there, you can access the <code>$container</code> property to identify the container in the DOM and add the class to that like this:</p>

<pre class="lang-js prettyprint-override"><code>var $select2 = $('select.select2').select2()

$select2.data('select2').$container.addClass("wrap")
</code></pre>

<h3>Here's a demo in Stack Snippets</h3>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var $select2 = $('select.select2').select2()
$select2.data('select2').$container.addClass("wrap")</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body .select2.narrow {
    width: 200px;
}
body .wrap .select2-selection--single {
    height: 100%;
}
body .select2-container.wrap .select2-selection--single .select2-selection__rendered {
    word-wrap: break-word;
    text-overflow: inherit;
    white-space: normal;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/&gt;
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"&gt;&lt;/script&gt;
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"&gt;&lt;/script&gt;

&lt;select class="select2 narrow wrap"&gt;
  &lt;option value="AL"&gt;Really long name that normally&lt;/option&gt;
  &lt;option value="AK"&gt;Alaska&lt;/option&gt;
  &lt;option value="AZ"&gt;Arizona&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2697911|text|我们使用的是Select2的React包装器，所以当前的答案对我们都不起作用。然而，我们能够制作针对容器的CSS，即使我们不能通过向基本元素添加类，然后使用an+adjacent+CSS+selector来向其添加类。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2697912|​|2697913|$('.select2').select2();|code-block|syntax|javascript|2697914|.wrap+%2B+.select2-container+.select2-selection--single+{
++++border:+solid+1px+#F00;
}|2697915|<link+href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css"+rel="stylesheet"/>
<script+src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script+src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<select+class="select2+narrow+wrap">
++<option+value="AL">Algebra</option>
++<option+value="AK">Alaska</option>
++<option+value="AZ">Arizona</option>
</select>|2697916|2697917|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3.org/TR/CSS21/selector.html#adjacent-selectors^0|26|O|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|M|3|N|5|H|7|14|8|@]|9|@]|C|$I|J]]|$1|O|3|E|5|6|7|15|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]]]

<p>We're using a React wrapper for Select2, so none of the current answers worked for us.  However, we were able to make CSS that targeted the container even though we could not add a class to it by adding the class to the base element, then using <a href="https://www.w3.org/TR/CSS21/selector.html#adjacent-selectors" rel="nofollow">an adjacent CSS selector</a>:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.select2').select2();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.wrap + .select2-container .select2-selection--single {
    border: solid 1px #F00;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/&gt;
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"&gt;&lt;/script&gt;
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"&gt;&lt;/script&gt;

&lt;select class="select2 narrow wrap"&gt;
  &lt;option value="AL"&gt;Algebra&lt;/option&gt;
  &lt;option value="AK"&gt;Alaska&lt;/option&gt;
  &lt;option value="AZ"&gt;Arizona&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2910051|text|如果你想将类添加到所有元素中，这里有一个简短的答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2910052|$.fn.select2.defaults.set('containerCssClass',+'wrap');|code-block|syntax|javascript|2910053|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|$]]

<p>Here is the short answer if you want to add class to all elements.</p>

<pre><code>$.fn.select2.defaults.set('containerCssClass', 'wrap');
</code></pre>


<p>This is very similar to this question on how to <a href="https://stackoverflow.com/q/15028995/1366033">add class to select2 element</a>, however the answers there appear to target earlier versions of the framework which has undergone some breaking changes in v4.0</p>

<p>According to this <a href="https://github.com/select2/select2/issues/285" rel="noreferrer">issue to add an additional custom class to select2-container</a>, there were several undocumented properties you could pass to the select2 constructor, including: <code>containerCss</code>, <code>containerCssClass</code>, <code>dropdownCss</code>, and <code>dropdownCssClass</code>.</p>

<p>However in version 4 when I run the following code:</p>

<pre><code>$('.select2').select2({
    containerCss: "wrap"
});
</code></pre>

<p>I get the following error:</p>

<blockquote>
  <p>Uncaught Error: No select2/compat/containerCss</p>
</blockquote>

<p>How can I pass a class to Select2 in v4.0?</p>

<p><strong>Here's an example in StackSnippets</strong>:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.select2').select2({
    containerCss: "wrap"
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/&gt;
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"&gt;&lt;/script&gt;
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"&gt;&lt;/script&gt;

&lt;select class="select2 narrow wrap"&gt;
  &lt;option value="AL"&gt;Algebra&lt;/option&gt;
  &lt;option value="AK"&gt;Alaska&lt;/option&gt;
  &lt;option value="AZ"&gt;Arizona&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>


How to add class to select2 element in v4.0

这与关于如何的问题非常相似，但是这里的答案似乎是针对框架的早期版本，该版本在v4.0中经历了一些突破性的变化根据这个，有几个未记录的属性可以传递给select2构造函数，包括：containerCss、containerCssClass、dropdownCss和dropdownCssClass。但是在版本4中，当我运行...

问如何在v4.0中向select2元素添加类
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在v4.0中向select2元素添加类EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在v4.0中向select2元素添加类
EN