How to add class to select2 element in v4.0

Question

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:

Select2 Data

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="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://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>

Here’s a demo in Stack Snippets

Leave a Comment Cancel reply