Повторите Selectize выберите поле - PullRequest
Новая
       9

Повторите Selectize выберите поле

0 голосов
/ 21 ноября 2018

У меня есть форма, в которой пользователь может ввести несколько адресов, город, улица + nbr и страна.

Для повторения этого поля я использую библиотеку повторителя jquery.Для поля города я хочу использовать поле ввода выбора.

Я пытаюсь повторить эти 4 поля при нажатии на кнопку, он копирует все правильно, но поле выбора не содержит входных данных (я думаю, это потому, что они имеют одинаковый идентификатор?), Но я незнать, как создать другой экземпляр выбора для этого объекта.

Это мой код:

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);
    }
});

Поскольку кнопка не является элементом выбора, я не знаю, как назначить ее вновь созданному элементу.

...