使用選擇二Jquery的中繼器不工作

Question

內部即時通訊使用選擇二引導https://select2.github.io/ 遠程數據提取通過AJAX，這裏面所有jQuery的中繼http://briandetering.net/repeater

<div data-repeater-item class="mt-repeater-item"> 
 
           <!-- jQuery Repeater Container --> 
 
<div class="mt-repeater-input"> 
 
<label class="control-label">First Team</label> 
 
    <br/> 
 
<select name="equipe_1" id="select2-button-addons-single-input-group-sm" class="form-control js-data-example-ajax"> 
 
</select> 
 
</div> 
 
<div class="mt-repeater-input"> 
 
<label class="control-label">Second Team</label> 
 
<br/> 
 
<select name="equipe_2" id="select2-button-addons-single-input-group-sm" class="form-control js-data-example-ajax"> 
 
</select> 
 
</div> 
 
           <div class="mt-repeater-input"> 
 
            <a href="javascript:;" data-repeater-delete class="btn btn-danger mt-repeater-delete"> 
 
             <i class="fa fa-close"></i> Delete</a> 
 
           </div> 
 
          </div>

這是我的HTML，但是當我點擊添加按鈕我有克隆的形式，但slect2 dropdonw不工作。

我Componement選擇二JS文件

$(".js-data-example-ajax").select2({ 
 
      placeholder: "Choose a Team...", 
 
      width: "off", 
 
      allowClear: true, 
 
      multiple:false, 
 
      ajax: { 
 
       url: "http://test.dev/teamsearch", 
 
       dataType: 'json', 
 
       type: "POST", 
 
       delay: 2000, 
 
       data: function(params) { 
 
        return { 
 
         q: params.term, // search term 
 
         page: params.page, 
 
         _token: CSRF_TOKEN 
 
        }; 
 
       }, 
 
       processResults: function(data, page) { 
 
        // parse the results into the format expected by Select2. 
 
        // since we are using custom formatting functions we do not need to 
 
        // alter the remote JSON data 
 
        return { 
 
         results: data 
 
        }; 
 
       }, 
 
       cache: true 
 
      }, 
 
      escapeMarkup: function(markup) { 
 
       return markup; 
 
      }, // let our custom formatter work 
 
      minimumInputLength: 4, 
 
      maximumSelectionLength: 1, 
 
      templateResult: formatRepo, 
 
      templateSelection: formatRepoSelection 
 
     });

我jQuery的中繼文件：

var FormRepeater = function() { 
 

 
    return { 
 
     //main function to initiate the module 
 
     init: function() { 
 
      
 
      $('.mt-repeater').each(function(){ 
 
     \t \t $(this).repeater({ 
 
     \t \t \t show: function() { 
 

 
         $(this).slideDown(); 
 

 

 
\t \t    }, 
 

 
\t \t    hide: function (deleteElement) { 
 
\t \t     if(confirm('Are you sure you want to delete this element?')) { 
 
\t \t      $(this).slideUp(deleteElement); 
 
\t \t     } 
 
\t \t    }, 
 

 
\t \t    ready: function (setIndexes) { 
 

 
\t \t    } 
 

 
     \t \t }); 
 
     \t }); 
 
     } 
 

 
    }; 
 

 
}(); 
 

 
jQuery(document).ready(function() { 
 
    FormRepeater.init(); 
 

 
});

進出口使用選擇二AJ斧頭加載隊列表裏面。

如何讓jquery中繼器複製我的表單時，select2工作？ 謝謝

Answer 1

看看jQuery form repeater and select2 dont work together。最根本的問題是，你需要中繼創建後，調用.select2（）對每一個新的選擇框

Answer 2

不知道這個答案來得太晚，或者它不再需要在所有，但我決定它大概可以幫助未來的人。

所以我有一段時間回來了這個問題，我通過做Bindrid說，並在每個添加行動中的用戶做表單中繼器中的.select2（）的呼叫來解決它。 我使用C＃MVC 5，jquery-repeater v1.2.1和select2 v4.0.3。

隨時幫助改進此代碼。

我的視圖模型：

public class MedicalCareViewModel 
{ 
    [Display(Name = "ICD")] 
    [Require(ErrorMessage = "This field is required")] 
    public List<RelatedICDViewModel> RelatedICD { get; set; } 
} 

public class RelatedICDViewModel 
{ 
    public int Code { get; set; } 

    public string AbbreviatedDescription { get; set; } 
} 

我的控制器：

public ViewResult MedicalCare(int id) 
{ 
    var medicalCare = MedicalCareService.GetById(id); 
    var model = Mapper.Map<MedicalCareViewModel>(medicalCare); 

    // This is for pre-loaded data, if you don't have to show pre-loaded data skip this 
    // Here's the catch, you'll have to iterate through your selected values in the 
    // select box and for each element you'll have to create a list of 
    // selected items with just the item selected so you can then 
    // iterate in the view and 'show' the form-repeater it's values. 
    // Since each select list item have the Selected propertie set to true 
    // select2 will know what to do 
    foreach(var ICD in model.RelatedICD) 
     ViewData[$"Index[{model.RelatedICD.IndexOf(ICD)}]"] = new List<SelectlistItem> 
    { 
     new SelectListItem 
     { 
     Value = ICD.Code.ToString(), 
     Text = ICD.AbbreviatedDescription, 
     Selected = true 
     } 
    }; 

    return View(model); 
} 

筆者認爲：

@model MedicalCareViewModel 
@using(Html.BeginForm("MedicalCare", "MedicalHistory", new {area = "Medical"}, FormMethod.Post, new { enctype = "multipart/form-data"})) 
{ 
    // other form fields 
    // Initialize the repeater by setting an ID to a div 
    <div id="rpRelatedICD"> 
     <div data-repeater-list="RelatedICD"> 
     // This conditional is for pre-loaded data, if you don't need to 
     // show pre-loaded data just use the else part 
     @if(Model.RelatedICD.Any()) 
     { 
      for(var i = 0; i < Model.RelatedICD.Count; i++) 
      { 
      <div data-repeater-item> 
       // It's important to define a class to the select box so 
       // you can on every add action on the repeater call the 
       // select2 initializer 
       @Html.DropDownListFor(model => model.RelatedICD, ViewData[$"Index[{i}]"] as List<SelectListItem>, new {@class = "RelatedICD"}) 
       <input data-repeater-delete type="button" value="Remove" class="ui-button ui-corner-all ui-widget" role="button"> 
      </div> 
      } 
     } 
     else 
     { 
      <div data-repeater-item> 
       // It's important to define a class to the select box so 
       // you can on every add action on the repeater call the 
       // select2 initializer 
       @Html.DropDownListFor(model => model.RelatedICD, new List<SelectListItem>(), new {@class = "RelatedICD"}) 
       <input data-repeater-delete type="button" value="Remove" class="ui-button ui-corner-all ui-widget" role="button"> 
      </div> 
     } 
     <div> 
       <input data-repeater-create="" type="button" value="Add" class="ui-button ui-corner-all ui-widget" role="button"> 
     </div> 
     </div> 
    </div> 
} 

我的JS：

<script type="text/javascript"> 
    $(document).ready(function() { 
     initializeICDRepeater(); 
     initializeICDSelect2(); 
    }); 

    function initializeICDRepeater() { 
     $("#rpRelatedICD").repeater({ 
     initEmpty: false, 
     show: function() { 
      $(this).slideDown(); 
      // like Bindrid said, on every Add action call the select2 initializer 
      initializeICDSelect2(); 
     }, 
     hide: function(deleteElement) { 
      $(this).slideUp(deleteElement); 
     } 
     }); 
    } 

    function initializeICDSelect2() { 
     $(".RelatedICD").select2({ 
     ajax: { /* your ajax definition */ }, 
     allowClear: true // || false it's your choice 
     }); 
    } 
</script> 

Answer 3

這是一個初始化表單中繼器按鈕時鐘的select2的解決方案。

這會在初始化select2之前等待幾分之一秒，確保在select2初始化時已經重複了這些項目。

<script type="text/javascript"> 
    $("#clone-button").click(function(){ 
     setTimeout(function(){ 
      $(".select2").select2({ 
       placeholder: "Select a state", 
       allowClear: true 
      }); 
     }, 100); 
    }); 
</script> 

對於在問題和解決方案see here