Select2 与 collectionType - Symfony2

Posted 2023-05-07

【中文标题】Select2 与 collectionType - Symfony2

【英文标题】：Select2 with collectionType - Symfony2

【发布时间】：2016-09-05 10:32:54

【问题描述】：

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

当我使用基本选择时，我有我的选择，但当我使用 select2 时“找不到结果”。这个问题特别适用于集合类型（textType、emailType 工作）。

我不明白这种行为。

编辑：

这是我的团队类型：

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

这是我的选择2：

$('#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>  

感谢您的帮助，

【问题讨论】：

您应该提供适当的代码。根据您提供的信息，我们不能说太多。

原型元素渲染是否正确（包含 select2 元素的选项）？以及为什么您将 select2 应用于容器而不是 select 元素？

我在没有和使用 select2 的情况下使用 html 输出编辑我的帖子。我不明白如何用 select2 实现我的脚本，因为通常他会替换基本选择，但为什么他不使用集合类型？

【参考方案1】：

在设置原型模板的 .js 中，我添加了这一行，它可以工作。

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