克隆的Select2沒有響應

Question

我想克隆一個包含select2工具的行，當我使用jQuery克隆該行時，克隆的select2沒有響應。在下面給出的圖像中，第一個select2是原始的，但工作正常，但第二個和第三個SELECT2其克隆沒有響應

代碼片斷：

$(document).ready(function() { 
 
    var clonedRow = $('.parentRow').clone().html(); 
 
    var appendRow = '<tr class = "parentRow">' + clonedRow + '</tr>'; 
 
    $('#addRow').click(function() { 
 
    $('#test').after(appendRow); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<tr class="parentRow" id="test"> 
 
    <td> 
 
    <g:message code="educationDetails.educationLevel.label" default="Education Level" /> 
 
    </td> 
 
    <td> 
 
    <div style="float: left;"> 
 
     <g:select name="degree.id" from="${EducationalDegree.list()}" optionKey="id" optionValue="title" noSelection="['': '']" id="degree" value="${cvEducationDetailCO?.degree?.id}" onchange="changeGradeSelectData(this.value)" /> 
 
    </div> 
 
    <div> 
 
     <a href="javascript:void(0)" id="addRow"> 
 
     <img alt="" title="Add Additional Education Level" src="/static/images 
 
                   /top_submit_1.gif"> 
 
     </a> 
 
    </div> 
 
    </td> 
 
</tr>

Answer 1

之前克隆行，你需要通過調用其destroy方法選擇元素上禁用選擇二：

破壞

恢復通過選擇二進行修改DOM。通過Select2完成的任何選擇都將被保留。

見http://ivaynberg.github.io/select2/index.html

後您克隆行和插入它在DOM克隆，你需要啓用這兩個中選擇元素，選擇2（原來的和新克隆的一個）。

這裏有一個的jsfiddle，顯示它如何可以做到：http://jsfiddle.net/ZzgTG/

小提琴的代碼

HTML

<div id="contents"> 
    <select id="sel" data-placeholder="-Select education level-"> 
     <option></option> 
     <option value="a">High School</option> 
     <option value="b">Bachelor</option> 
     <option value="c">Master's</option> 
     <option value="c">Doctorate</option> 
    </select> 
</div> 
<br> 
<button id="add">add a dropdown</button> 

CSS

#contents div.select2-container { 
    margin: 10px; 
    display: block; 
    max-width: 60%; 
} 

jQuery的

$(document).ready(function() { 
    $("#contents").children("select").select2(); 
    $("#add").click(function() { 
     $("#contents") 
      .children("select") 
      // call destroy to revert the changes made by Select2 
      .select2("destroy") 
      .end() 
      .append(
       // clone the row and insert it in the DOM 
       $("#contents") 
       .children("select") 
       .first() 
       .clone() 
     ); 
     // enable Select2 on the select elements 
     $("#contents").children("select").select2(); 
    }); 
}); 

Answer 2

我解決了這個通過創建不同的克隆功能：

jQuery.fn.cloneSelect2 = function (withDataAndEvents, deepWithDataAndEvents) { 
    var $oldSelects2 = this.is('select') ? this : this.find('select'); 
    $oldSelects2.select2('destroy'); 
    var $clonedEl = this.clone(withDataAndEvents, deepWithDataAndEvents); 
    $oldSelects2.select2(); 
    $clonedEl.is('select') ? $clonedEl.select2() : 
          $clonedEl.find('select').select2(); 
    return $clonedEl; 
}; 

Answer 3

我解決了這個問題，它：
呼叫destroy方法添加新行之前

$(".className").select2("destroy"); //Destroy method , connect with class no ID (recomend) 

調用select2之後jQuery函數：

$(".className").select2({    
       placeholder: "Example", 
       alowClear:true 
      }); 

希望它幫助;）

Answer 4

我面臨同樣的問題，而試圖一排動態地添加到表。 （該行包含多個select2實例。）

我解決它以這樣的方式

function addrow() 
{ 
    var row = $("#table1 tr:last"); 

    row.find(".select2").each(function(index) 
    { 
     $(this).select2('destroy'); 
    }); 

    var newrow = row.clone();  

    $("#table1").append(newrow); 

    $("select.select2").select2(); 
} 

訣竅是，你需要摧毀克隆行之前單獨.select2和所有的實例。然後克隆後，重新初始化.select2。 我希望這也適用於其他人。

Answer 5

你必須先克隆 例如前銷燬所有選擇2：

var div = $("#filterForm div"); 

    //find all select2 and destroy them 
    div.find(".select2").each(function(index) 
    { 
     if ($(this).data('select2')) { 
      $(this).select2('destroy'); 
      } 
    }); 

    //Now clone you select2 div 
    $('.filterDiv:last').clone(true).insertAfter(".filterDiv:last"); 

    //we must have to re-initialize select2 
    $('.select2').select2(); 

Answer 6

你要克隆之前先摧毀選擇2，但.select2（「摧毀」）沒有工作。 使用這個：

$myClone = $("section.origen").clone(); 

$myClone.find("span").remove(); 
$myClone.find("select").select2(); 

$("div").append($myClone);