jQuery的形式轉發器和選擇2不一起工作

Question

我使用選擇二和jQuery形式轉發器（https://github.com/DubFriend/jquery.repeater）

我已經搜索在谷歌/所以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選擇器將有助於僅刪除/初始化您想要的選擇。

初始化select2以調整寬度到父div /容器後，始終使用的CSS線。

問候

Answer 3

當使用initEmpty: false選項，在顯示功能初始化選擇2第一行不起作用。在這種情況下，你也可以在ready函數運行時初始化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