在集合类型symfony中自定义CSS

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.

我正在使用一个呈现多个选择输入的collectionType，我想将select2 css类添加到我的表单中，但它只是不起作用。

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: 在集合类型symfony中自定义CSS 1

它应该呈现如下的选择输入：1

But it renders like a regular select input 在集合类型symfony中自定义CSS 2

但它呈现为常规选择输入2

This is the output html

这是输出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>

I also tried to do it via jQuery and no luck

我也尝试通过jQuery做到这一点，没有运气

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

How do I properly attach the select2 css class?

如何正确附加select2 css类？

2 个解决方案

#1

Since your <selects /> are created dinamically, you have to set up a listener to apply the select2 function when each select element is created.

由于您的是以dinamically方式创建的，因此您必须设置一个侦听器，以便在创建每个select元素时应用select2函数。

Somthing like this might work:

这样的事情可能有用：

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

#2

Try this:

尝试这个：

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

#1