javascript - Select2 与 collectionType - Symfony2

Question

我在 Symfony2 中使用带有集合类型的 select2 时遇到问题

当我使用基本选择时，没问题，我有自己的选择，但是当我使用 select2 时，“找不到结果”。此问题特别针对集合类型(textType、emailType 有效)。

我不明白这种行为。

编辑:

这是我的团队类型:

$builder->add('players', 'collection', array(
            'type' => 'entity',
            'allow_add' => true,
            'allow_delete' => true,
            ...
        ))

这里是我的 select2:

$('#team_players').select2(
        {
         placeholder: '{{ 'Select player' }}'
        });

我的显示集合类型的js:

 $(document).ready(function()
    {
     var container = $('#team_players');
     var index = 0;

     // HTML output: <select id="team_players_0" name="[players][0]" class="form-control">...

     var prototype = $(container.attr('data-prototype').replace(/__name__label__/g, 'choose').replace(/__name__/g, index)); 
     container.append(prototype);
    });

编辑:

没有 select2 的 html 输出:

<div class="team_players_widget">
<div id="team_players" class="my-players" 
    data-prototype="<div class=&quot;form-group&quot;>
                        <label class=&quot;control-label&quot;for=&quot;team_players___name__&quot;>__name__label__</label>
                        <select id=&quot;team_players___name__&quot; name=&quot;team[players][__name__]&quot; class=&quot;form-control&quot;>
                            <option value=&quot;&quot;></option>            
                            <option value=&quot;1&quot; >Player 1</option>            
                            <option value=&quot;2&quot; >Player 2</option>            
                            <option value=&quot;3&quot; >PLayer 3</option>
                        </select>
                    </div>">

    <div class="form-group">
        <label class="control-label" for="team_players_0">choose</label>
            <select id="team_players_0" name="team[players][0]" class="form-control">
                <option value=""></option>            
                <option value="1">Player 1</option>            
                <option value="2">Player 2</option>            
                <option value="3">Player 3</option></select>
    </div>
</div>

我使用 select2 的 html 输出:

<div class="team_players_widget">
<div id="team_players" class="my-players select2-hidden-accessible" 
    data-prototype="<div class=&quot;form-group&quot;>
    <label class=&quot;control-label&quot; for=&quot;team_players___name__&quot;>__name__label__</label>
    <select id=&quot;team_players___name__&quot; name=&quot;team[players][__name__]&quot; class=&quot;form-control&quot;>
        <option value=&quot;&quot;></option>            
        <option value=&quot;1&quot; >Player 1</option>            
        <option value=&quot;2&quot; >Player 2</option>            
        <option value=&quot;3&quot; >Player 3</option>
    </select>
</div>" tabindex="-1" aria-hidden="true">

<div class="form-group">
    <label class="control-label" for="team_players_0">choose</label>
    <select id="team_players_0" name="team[players][0]" class="form-control">
        <option value=""></option>            
        <option value="1">Player 1</option>            
        <option value="2">Player 2</option>            
        <option value="3">Player 3</option></select>
</div>

<span class="select2 select2-container select2-container--default select2-container--below select2-container--open select2-container--focus" dir="ltr" style="width: 100%;">
        <span class="selection">
            <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-team_players-container" aria-owns="select2-team_players-results">
                <span class="select2-selection__rendered" id="select2-team_players-container">
                    <span class="select2-selection__placeholder">Select player</span>
                </span>
                <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
            </span>
        </span>
                <span class="dropdown-wrapper" aria-hidden="true"></span>
    </span>
 </div>  

谢谢你的帮助，

Answer 1

在设置原型(prototype)模板的 .js 中，我添加了这一行并且它起作用了。

$container.find('select').each(function(){
  $(this).select2();
});