Настроить CSS в виде коллекции symfony

Question

Я использую collectionType, который отображает несколько входов выбора, я хочу добавить класс select2 css в свою форму, но он просто не работает.

Это форма, в которой есть коллекция.

->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', 
        ], 
       ], 
      ]) 

прутик является

<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> 

Он должен оказывать отборный вход так: 1

Но это делает, как обычный выберите вход 2

Это выход html

<div class="form-group"><label class="control-label required">Diagnósticos dinámicos</label>  
<div id="paciente_form_arrayDiagnosticos" class="select2" data-prototype="&lt;div class=&quot;row&quot;&gt;&lt;div class=&quot;col-xs-9&quot;&gt;&lt;select id=&quot;paciente_form_arrayDiagnosticos___name__&quot; name=&quot;paciente_form[arrayDiagnosticos][__name__]&quot; required=&quot;required&quot; class=&quot;select2 form-control&quot;&gt;&lt;option value=&quot;&quot; selected=&quot;selected&quot;&gt;Seleccionar Diagnóstico&lt;/option&gt;   &lt;option value=&quot;1&quot; &gt;se siente mal&lt;/option&gt;   &lt;option value=&quot;2&quot; &gt;asfd&lt;/option&gt;   &lt;option value=&quot;3&quot; &gt;YOLO&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;div class=&quot;col-xs-3&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-danger btn-sm&quot; data-removefield=&quot;collection&quot; data-field=&quot;__id__&quot;&gt;Eliminar Diagnóstico&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;" data-prototype-name="__name__"><ul class="bc-collection list-unstyled"></ul><a href="#" class="btn btn-primary btn-sm" data-addfield="collection" data-collection="paciente_form_arrayDiagnosticos" data-prototype-name="__name__">Agregar Diagnóstico</a></div></div> 

Я также пытался сделать это с помощью JQuery и не повезло

<script> 
$(function(){ 
    $('#paciente_form_arrayDiagnosticos').addClass('select2')}); 
</script> 

Как правильно прикрепить класс Выбор2 CSS?

Answer 1

Попробуйте это:

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

Answer 2

Так как ваш <selects /> созданы динамически, вы должны настроить слушателя применить функцию select2 при создании каждого выбора элемента.

Somthing, как это может работать:

$('body').on('DOMNodeInserted', '.select2', function() { 
    $(this).select2(); 
});