重复选择选择字段

时间:2018-11-21 13:02:24

标签: javascript jquery repeater selectize.js

我有一个表单,用户可以输入多个地址,城市,街道+ 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元素,所以我不知道如何将其分配给新创建的元素。

0 个答案:

没有答案