How to add class to select2 element in v4.0

问题

This is very similar to this question on how to add class to select2 element, however the answers there appear to target earlier versions of the framework which has undergone some breaking changes in v4.0

According to this issue to add an additional custom class to select2-container, there were several undocumented properties you could pass to the select2 constructor, including: containerCss, containerCssClass, dropdownCss, and dropdownCssClass.

However in version 4 when I run the following code:

$('.select2').select2({
    containerCss: "wrap"
});

I get the following error:

Uncaught Error: No select2/compat/containerCss

How can I pass a class to Select2 in v4.0?

Here's an example in StackSnippets:

$('.select2').select2({
    containerCss: "wrap"
});

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

回答1:

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

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

var $select2 = $('select.select2').select2()

$select2.data('select2').$container.addClass("wrap")

Here's a demo in Stack Snippets

var $select2 = $('select.select2').select2()
$select2.data('select2').$container.addClass("wrap")

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

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

回答2:

You can use the following options to add a class to the container (selection) or dropdown (options):

$('.select2').select2({
    containerCssClass: "custom-container",
    dropdownCssClass: "custom-dropdown",
});

According to the Migration Guide in the 4.0 Announcement:

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

According to the Configuration Docs, the following options can be passed:

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

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

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)

$('.select2').select2({
    containerCssClass: "custom-container",
    dropdownCssClass: "custom-dropdown",
});

select {
  width: 200px;
}

.custom-container span {
  color: blue!important;
}
.custom-dropdown {
  color: red;
}

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

回答3:

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

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

回答4:

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 an adjacent CSS selector:

$('.select2').select2();

.wrap + .select2-container .select2-selection--single {
    border: solid 1px #F00;
}

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

回答5:

Here is the short answer if you want to add class to all elements.

$.fn.select2.defaults.set('containerCssClass', 'wrap');

来源：https://stackoverflow.com/questions/30789158/how-to-add-class-to-select2-element-in-v4-0

标签

javascript

jquery

jquery-select2