Пользовательский плагин не применяется к динамически генерируемому выделению - PullRequest
Новая
       26

Пользовательский плагин не применяется к динамически генерируемому выделению

0 голосов
/ 22 июня 2019

Я использую Bootstrap select в моем проекте, но есть проблема, и это то, что в моей форме пользователь может генерировать новые элементы, такие как <select> и т. Д.

при использовании добавить новый выбор и выбрать один из его элементов, он не отображается как выбранный элемент в выборе.

Примечание: он работает правильно для статических select тегов в моей форме.

Я генерирую новые элементы, подобные этому: 

$(".newrow").on('click', function () {

    debugger;
    var index = (new Date()).getTime(); // unique indexer
    var baseTable = $(this).closest(".added").siblings(".table")
    var clone = $(baseTable).find(".template").clone();
    clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
    clone.html($(clone).html().replace(/"%"/g, '"' + index + '"'));
    $(baseTable).find("tbody tr:last").after('<tr>' + clone.html() + '</tr>');
});

и мой шаблон выглядит так: 

   <tr class="template"> </td>
                <td>
                    <div class="form-group level3">
                        <select class="selectpicker  form-control" data-live-search="true"  name="Education[#].EducationCenterId">
                            <option value="0">choose an item</option>
                            <option>some other options here </option>
                        </select>
                    </div>
                </td></tr>

1 Ответ

1 голос
/ 22 июня 2019

Включите boostrap.js и css.

HTML 

    <table class="table">
        <tbody>
        <tr class="template"> 
            <td>
                <div class="form-group level3">
                <select class="selectpicker  form-control" data-live-search="true"  name="Education[#].EducationCenterId">
                    <option value="0">choose an item</option>
                    <option value="test">some other options here </option>
                </select>
                </div>
            </td>
        </tr>
        </tbody>
            </table>
             <button class="newrow" value="New row">New</button>

             </button>

Js 

$(document).ready(function(){

    $(".newrow").on('click', function () {
        var index = (new Date()).getTime(); // unique indexer
        var baseTable = $(".table")
        var clone = $(baseTable).find(".template select").clone();
        $(baseTable).find("tbody tr:last").after('<tr><td><select class="selectpicker  form-control" data-live-search="true"  name="Education[#].EducationCenterId">' + clone.html() + '</select></td></tr>');
        $('.selectpicker').selectpicker();
    });

    $('.selectpicker').selectpicker();
});

Рабочая скриптовая ссылка

...