Add multiple selected default values to select 2 jQuery select box

Question

I am using loading the defaults values that are already in the database and when the user wants to add more publications they can type and add using select2 - jQuery replacement for select boxes.

Here is my html code.

<div class="card-body">
<select class="mul_publications" name="publications[]" multiple="multiple" style="width:100%;">
    {% for publication in product.publications %}
    <option value="{{publication.id}}" selected>{{publication.name}}</option>
    {% endfor %}
</select>

My javascript code.

<script>
$(document).ready(function() {
    $('.mul_publications').select2({
        ajax: {
            url: '/Publication/search',
            processResults: function (data) {
                // Tranforms the top-level key of the response object from 'items' to 'results'
                return {
                    results: data
                };
            }
        }
    });
    });
</script>

When loading the default data it's not loading . some time it is loading only one value. What is the proper way to append default selected options?