Select2 Placeholder not working

Question

I'm trying to use the Select2 multiple placeholder. And when I use it, its simply not working.

this is my JS code:

        $(".materialS").select2({
        placeholder: 'Material types'
    });

and the Html/Php code:

<select class="materialS" name="material[]" multiple="multiple">
                <?php if ($materials){
                    foreach ($materials as $material) { ?>
                    <option value="<?php echo safe_class($material)?>"><?php echo $material; ?></option>
                    <?php }} ?>
                </select> 

so I get the materials from db(more like wp). now the thing is that when I click on some select and then I remove it, I can see the placeholder but not before.

any idea whats wrong?

Answer 1

Dom is not ready when javascript script is executed.

try including this code inside document.ready https://learn.jquery.com/using-jquery-core/document-ready/

$(function() {
    $(".materialS").select2({
        placeholder: 'Material types'
    });
});