使用select2 Uncaught时出错：No select2 / compat / containerCss

Question

I'm using Node.js to bundle my files and am using Select2 as a require() in my main JS.

I also have the following code:

    <select class="form-control " 
            data-container-css-class="form-control-dropdown" 
            name="quick_pop_quiz[title]" 
            id="quick_pop_quiz-title" 
            data-form-dropdown-handler>

    <optgroup label="">
        <option value="1">
            Herr </option>
        <option value="2">
            Frau </option>
    </optgroup>

    <optgroup label="----------------">
        <option value="3">
            Herr Dr. </option>
        <option value="4">
            Herr Prof. </option>
        <option value="5">
            Herr Prof. Dr. </option>
    </optgroup>

    <optgroup label="---------------">
        <option value="6">
            Frau Dr. </option>
        <option value="7">
            Frau Prof. </option>
        <option value="8">
            Frau Prof. Dr. </option>
    </optgroup>
</select>  

and javascript:

var $ = require('jquery);
require('select2')($);
var items = $('.selectorforselect2').filter(':not([class^="select2"])'); 
if(items.length > 0) {
    $(items).select2();
}

Uncaught Error: No select2/compat/containerCss

How can I fix this?

Answer 1

For the options defined, data-container-css-class select2 full is required. With the 'normal' version it doesn't support these features.

To fix the error use:

require('select2/dist/js/select2.full.js')($);