cakephp 按钮添加更多/更少字段

cakephp button add more / less fields

您好,我正在尝试制作一个按钮,允许我向表单添加 2 个附加字段:1 个文本类型字段和 1 个多项选择器(见图)

fields

我希望能够多次添加这两个字段并将其保存在数据库中,这两个字段的代码如下所示:

<div class="zone_prestations">
            <div class="form-group">
                <?php
                echo $this->Form->label(
                        'Prestation.zone',
                        'Zone',
                        'col-sm-2 control-label'
                );
                echo $this->Form->input('Prestation.zone',
                                        array('div' =>
                                                      array(
                                                              'class' => 'col-sm-10'
                                                      ),
                                              'class' => 'form-control'
                                        ));
                ?>
            </div>
            <div class="form-group">
                <?php

                echo $this->Form->label(
                        'Prestation.id_contract',
                        'Préstation',
                        'col-sm-2 control-label'
                );
                echo $this->Form->input(
                        'Prestation.id_prestation',
                        array(
                                'type' => 'select',
                                'options' => $prestations,
                                'empty' => 'Selectionnez les préstations',
                                'div' => array('class' => 'col-sm-10'),
                                'class' => 'form-control search-select',
                                'multiple' => true,
                                'value' => $selected,
                                'id' => 'prestation_selector'
                        )
                );
                ?>
            </div>
        </div>

知道我有一个多项选择字段,你知道我该怎么做吗?感谢您的帮助

更新 20/02/21

<script type="text/javascript">
$(document).ready(function() {
    $("select").select2({ width: '100%' });
});

$(document).ready(function () {
    var maxField = 10;
    var addButton = $('#add_button');
    var wrapper = $('#prestation_select');
    var x = 1;
    var fieldHTML = '<div class="form-group">';
    fieldHTML += <?php echo $this->Form->label(
                    'Prestation.' + x + '.zone',
                    'Zone',
                    'col-sm-2 control-label'
            );
            echo $this->Form->input('Prestation.' + x + '.zone',
                                    array('div' =>
                                                  array(
                                                          'class' => 'col-sm-10'
                                                  ),
                                          'class' => 'form-control'
                                    ));
            ?>
    fieldHTML +='</div>';

    $(addButton).click(function () {
        if (x < maxField) {
            x++;
            $(wrapper).append(fieldHTML);
        }

        $("select").select2({ width: '100%' });
    });

    $(wrapper).on('click', '.remove_button', function (e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    });
});

您用于生成 fieldHTML 的代码是 运行 一次,当您的页面加载时,当前版本为 x。每次单击添加按钮时,您都会得到完全相同的,其中总是带有“1”;它没有用新的 x 重新评估。解决方案应该很简单,只需将 HTML 的计算移到 add 函数中即可。

另外请注意,单击删除按钮时不要减少 x。如果您从字段 1 开始,然后添加 2、3 和 4,然后删除 2,x 递减 x 将意味着添加另一个字段将为您提供 4 的副本。他们不需要是连续的,你只需要在那里有不同的数字。