Customize CSS in collection type symfony - php

Question

I'm using a collectionType that render a multiple select inputs, I want to add the select2 css class to my form but it just doesn't works.
This is the Form that has the collection.
->add('arrayDiagnosticos', 'collection', [
'type' => 'entity',
'label' => 'Diagnósticos dinámicos',
'allow_add' => true,
'allow_delete' => true,
'attr' => [
'class' => 'select2',
],
'options' => [
'empty_value' => 'Seleccionar Diagnóstico',
'class' => 'AppBundle:Diagnostico',
'required' => true,
'label' => 'Buscador de Diagnósticos',
'attr' => [
'class' => 'select2',
],
],
])
The twig is
<ul class="tags" data-prototype="{{ form_widget(form.arrayDiagnosticos.vars.prototype)|e }}">
{# iterate over each existing tag and render its only field: name #}
{% for diagnostico in form.arrayDiagnosticos %}
<li>
{{ form_row(diagnostico.nombreDiagnostico) }}
</li>
{% endfor %}
</ul>
It should render a select input like this:
1
But it renders like a regular select input
2
This is the output html
<div class="form-group"><label class="control-label required">Diagnósticos dinámicos</label>
<div id="paciente_form_arrayDiagnosticos" class="select2" data-prototype="<div class="row"><div class="col-xs-9"><select id="paciente_form_arrayDiagnosticos___name__" name="paciente_form[arrayDiagnosticos][__name__]" required="required" class="select2 form-control"><option value="" selected="selected">Seleccionar Diagnóstico</option> <option value="1" >se siente mal</option> <option value="2" >asfd</option> <option value="3" >YOLO</option></select></div><div class="col-xs-3"><a href="#" class="btn btn-danger btn-sm" data-removefield="collection" data-field="__id__">Eliminar Diagnóstico</a></div></div>" data-prototype-name="__name__"><ul class="bc-collection list-unstyled"></ul>Agregar Diagnóstico</div></div>
I also tried to do it via jQuery and no luck
<script>
$(function(){
$('#paciente_form_arrayDiagnosticos').addClass('select2')});
</script>
How do I properly attach the select2 css class?

Answer 1

Try this:
->add('arrayDiagnosticos', 'collection', [
'type' => new PreDiagnosticoType(),
'label' => ' ',
'allow_add' => true,
'allow_delete' => true,
'prototype' => true,
'by_reference' => false,
'attr' => array(
'class' => 'select2',
),
])

Answer 2

Since your <selects /> are created dinamically, you have to set up a listener to apply the select2 function when each select element is created.
Somthing like this might work:
$('body').on('DOMNodeInserted', '.select2', function() {
$(this).select2();
});