时间戳

首页 > 解决方案 > 重复选择选择字段

javascript - 重复选择选择字段

问题描述

我有一个表单，用户可以在其中输入多个地址、城市、街道+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);
    }
});

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

标签： javascriptjqueryrepeaterselectize.js

解决方案

有趣的是，我遇到了类似的问题，但找不到解决方案，所以我不得不自己解决。这是对我应用的解决方案的解释，以便很好地工作selectize。jquery.repeater

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

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

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

我建议您向包含select 元素的.form-group包装器添加一个类。.companycity-select这将有助于仅在确切位置附加一个新的选择元素，因为.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: []
        });
    }
});

推荐阅读