重复选择选择字段

Question

我有一个表单，用户可以在其中输入多个地址、城市、街道+nbr 和国家/地区。

为了重复这个字段，我使用了 jquery 转发器库。对于城市字段，我想使用选择输入字段。

单击按钮时，我试图重复这 4 个字段，它会正确复制所有内容，但 selectize 字段不包含输入（我猜这是因为它们具有相同的 id？）但我不知道如何在该对象上实例化另一个 selectize 实例。

这是我的代码：

HTML：

<div class="row">
<div class="form-group col-12 mb-2 address-repeater">

    <div data-repeater-list="stcity">
        <div class="input-group mb-1" data-repeater-item>
            <div class="row">
                <div class="col-md-8">
                    <div class="form-group">
                        <label for="companystreet"><?=lang("flow_company_street")?></label>
                        <input type="text" id="companystreet" class="form-control" placeholder="<?=lang("flow_company_streetname")?>" name="companystreet" required data-validation-required-message="<?=lang("flow_company_street_validation")?>">
                        <div class="help-block font-small-3"></div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="companystreetnumber"><?=lang("flow_company_nbr")?></label>
                        <input type="text" id="companystreetnumber" class="form-control" placeholder="<?=lang("flow_company_streetnbr")?>" name="companystreetnumber" required data-validation-required-message="<?=lang("flow_company_nbr_validation")?>">
                        <div class="help-block font-small-3"></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="companycity"><?=lang("flow_company_city_or_commune")?></label>
                        <select id="companycity" class="companycity-select" name="companycity" autocomplete="new-password" required data-validation-required-message="<?=lang("flow_company_city_or_commune_validation")?>">
                            <option value="" selected><?=lang("flow_company_select_city_or_commune")?></option>
                            <?php
                            foreach ($citiesbe as $city) {
                                //Values are prefilled from javascript
                                $key = strtolower($city->name_nl) . "," . $city->zip_code;
                                echo "<option value=\"$key\"> $city->name_nl ($city->zip_code)</option>";
                            }
                            ?>
                        </select>
                        <div class="help-block font-small-3"></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="companycountry"><?=lang("flow_company_country")?></label>
                        <select id="companycountry" class="companycountry-select" name="companycountry" autocomplete="new-password" disabled>
                            <option value="BE" selected><?=lang("flow_company_country_belgium")?></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <button type="button" data-repeater-create class="btn btn-primary">
        <i class="ft-plus"></i> Add new address
    </button>
</div>

Javascript：

// Custom Show / Hide Configurations
$('.address-repeater').repeater({
    show: function () {
        $(this).slideDown();
    },
    hide: function(remove) {
        $(this).slideUp(remove);
    }
});

由于按钮不是selectize元素，我不知道如何将它分配给新创建的元素。

Answer 1

有趣的是，我遇到了类似的问题，但找不到解决方案，所以我不得不自己解决。这是我为使selectize 和jquery.repeater 正常工作而应用的解决方案的解释。

首先，通过浏览器控制台检查，您会发现selectize 删除了除空选项之外的所有选择选项，并使用它来填充它自己的通过 javascript 生成的下拉列表。这对jquery.repeater 来说是个问题，因为它只会根据初始页面加载重复或创建副本，而不是之后。因此，重复的是选择元素中剩下的唯一选择选项，在这种情况下 （不幸） 是空选择选项。这是 pen 对此的解释，您可以随意切换选择元素中的类别定位 selectize 以亲自查看。

所以，以下是我为使其正常工作而采取的步骤：

• 在重复表单时（重复器实例的show()），您需要从 DOM 中完全删除重复的元素。
• 在 DOM 中使用首选的 （或相同） 属性/选项创建另一个选择元素。
• 在新创建的选择元素上实例化选择。

我建议您向包含.companycity-select 选择元素的.form-group 包装器添加一个类。这将有助于仅在确切位置附加新的选择元素，因为代码中还有其他 .form-group。在下面查看我的解决方案：

// Assuming your have the select element wrapper as <div class="form-group select-wrapper">
$('.address-repeater').reapeter({
    show: function() {
        $(this).slideDown();

        // Remove the created element
        $(this).find('.companycity-select').remove();

        // Repeater rewrites your name attributes to avoid collisions within the same form, 
        // so we need to follow this same rule
        // Get the length of the currently repeated items, to be used as the index for new elements
        var count = $('div[data-repeater-item]').length;

        // Create the new select element. The select name is based on the new name by repeater
        var new_select_option = '<option value="" selected>Select city or community</option>';
        var new_select_element = '<select id="companycity" class="companycity-select" name="stcity['+count+'][companycity]" autocomplete="new-password" required>'+new_select_option+'</select>';

        // Append newly created element to DOM. Remember the new class added to the form-group?
        $(this).find('.form-group.select-wrapper').append(new_select_element);

        // Create a new instance of selectize on the new select element
        $(this).find('.companycity-select').selectize({
            // Populate your select options data via ajax,
            // see docs: https://selectize.dev/docs.html
            valueField: '',
            labelField: '',
            searchField: [],
            options: []
        });
    }
});