When using the select2 plug-in, I ran into a cloning problem, namely, new blocks are inactive.

At the moment there is such a code js

var Count = 1; $(function() { $(document).on('click', '.btn-add', function(e) { e.preventDefault(); var controlForm = $('.controls form:first-child'), currentEntry = $(this).parents('.entry:first'), newEntry = $(currentEntry.clone(true)).appendTo(controlForm); newEntry.find('input').val(''); controlForm.find('.entry:not(:last) .btn-add') .removeClass('btn-add').addClass('btn-remove') .html('<div id="rectangle"></div>'); }).on('click', '.btn-remove', function(e) { $(this).parents('.entry:first').remove(); e.preventDefault(); return false; }); });

html

 <form method="post" id="data"> <div class="entry input-group col-xs-3"> <input class="name" name="name[]" type="text" placeholder="Введите название" /> <input class="cost" name="cost[]" type="text" placeholder="Введите стоимость" /> <select class="select-item-1 select-block" name="Mat[]"> <option selected hidden style='display: none' value="asd">Выберите материал</option> <?foreach ($Mark as $value): ?> <option value="<?=$value['id_m']?>"><?=$value['M_Name']?></option> <?php endforeach;?> </select> <select class="select-item-2 select-block" name="Prod[]"> <option selected hidden style='display: none' value="asd">Выберите продукт</option> <?foreach ($Prod as $value): ?> <option value="<?=$value['id_p']?>"><?=$value['P_Name']?></option> <?php endforeach;?> </select> <div class="btn-add"> <div class="cross"></div> </div> 

 <form method="post" class="buttons" action="<?=base_url('test/index/');?>"> <button class="btn btn" type="submit" form="data" name="PIadd" value="SendOrd">Добавить</button> <button class="btn reset" type="reset">Сбросить</button> </form>

While searching on the internet, stumbled upon this answer . There is also such an option , but here they show how to do for one element and it is not quite clear how to apply it in my case.
Actually, the question itself - what should the js code itself look like in order for the blocks to be active? As well as how to add a counter for each new select correctly (needed for subsequent correct processing, since the multiple attribute will be set)?

UPD: Solved the problem. I give the code, can someone come in handy

 <script> var Count = 1; $(document).ready(function() { $(".entry").children("select").select2(); $(".btn-add").click(function () { $(".entry") .children("select") .select2("destroy") .removeAttr('data-live-search') .removeAttr('data-select2-id') .removeAttr('aria-hidden') .removeAttr('tabindex'); }); $(document).on('click', '.btn-add', function(e) { e.preventDefault(); var controlForm = $('.controls form:first-child'), currentEntry = $(this).parents('.entry:first'), newEntry = $(currentEntry.clone(true)).appendTo(controlForm); newEntry.find('input').val(''); controlForm.find('.entry:not(:last) .btn-add') .removeClass('btn-add').addClass('btn-remove') .html('<div id="rectangle"></div>'); $(".entry").children("select").each(function () { $(this).select2({ theme: "classic", "language": { "noResults": function(){ return "По запросу ничего не найдено"; } }, }); }); }).on('click', '.btn-remove', function(e) { $(this).parents('.entry:first').remove(); e.preventDefault(); return false; }); }); </script>

    1 answer 1

      $(".select-block").each(function(i) { $(this).select2(); });
    • Alas, this code gave the same result. Depending on where I put, I received either inactive blocks (the end of the script) or blocks, where when adding a new line select2 flies from the previous one (middle of the script). - veirus