JQuery форма повторителя и Выбор2 не работают вместе

Question

Я использую Select2 и JQuery форма ретранслятора (https://github.com/DubFriend/jquery.repeater)

Я искал на Google/так в течение 2-х дней, но не могу показаться, чтобы заставить его работать.

include jquery/select2.js/jquery.repeater.js 

var form = $('#form'); 
form.find('select').select2(); 

form.repeater({ 
    show: function() { 
    $(this).show(function(){ 
     form.find('select').select2('destroy').select2(); 
    }); 
    }, 
    hide: function (remove) { 
     $(this).hide(remove); 
    } 
}); 

Проблема состоит в том, что клоны jQuery.repeater DIV тег, в котором вход и выберите элементы, когда Выбор2 уже инициализирован и уже изменил DOM, так jQuery.repeater копии измененную DOM. Я попытался уничтожить select2 перед вызовом функции повторения, но этот dindt работает.

Answer 1

попробовать это

include jquery/select2.js/jquery.repeater.js 

var form = $('#form'); 
form.find('select').select2(); 

form.repeater({ 
    show: function() { 
    $(this).show(function(){ 
     // you have not really created this second one 
     // so the destroy does not work. 
     // Since it is just a copy of the html, 
     form.find('select').next('.select2-container').remove(); 
     form.find('select').select2(); 
    }); 
    }, 
    hide: function (remove) { 
     $(this).hide(remove); 
    } 
}); 

Answer 2

Я новичок в SO, но читатель долгое время. Я работаю над проектом, где я использую jQuery.repeater для повторения нескольких входов select2. Следующий подход помог решить мою проблему инициализации входов после их загрузки.

$('.job_repeater').repeater({ 
    show: function() { 
    $(this).slideDown(); 
    $('.select2-container').remove(); 
    $('Replace with your select identifier id,class,etc.').select2({ 
     placeholder: "Placeholder text", 
     allowClear: true 
    }); 
    $('.select2-container').css('width','100%'); 
    }, 
    hide: function (remove) { 
    if(confirm('Confirm Question')) { 
     $(this).slideUp(remove); 
    } 
    } 
}); 

Более точные селектор jQuery поможет только удалить/инициализировать выбранные вами элементы.

Строка CSS Я использую всегда после инициализации select2 для настройки ширины родительского div/контейнера.

С наилучшими пожеланиями

Answer 3

При использовании опции initEmpty: false, инициализацией ВЫБ.2 в функции шоу не работает для первой строки. В этом случае вы также можете инициализировать select2, когда запускается функция готовности.

$('.repeater').repeater({ 
    isFirstItemUndeletable: false, 
    initEmpty: false, 
    ready: function() { 
     $('.select2').select2({ 
      placeholder: "Select an option...", 
     }); 
    }, 
    show: function() { 
     $(this).slideDown(); 
     $('.select2').select2({ 
      placeholder: "Select an option...", 
     }); 
    }, 
    hide: function() { 
     $(this).slideUp(); 
    }, 
}); 

Answer 4

Это решение, которое инициализирует select2 по форме кнопки повторителя кнопки.

<script type="text/javascript"> 

  

    $("p").mouseover(function(){ 

     setTimeout(function(){ 

  

      $(".select2").select2({ 

          placeholder: "Select a state", 

          allowClear: true 

      }); 

          

     }, 100); 

    }); 

  

</script> 

Для того, в обзоре глубины проблемы и решения see here