在克隆该行之前，您需要通过调用其destroy方法在 select 元素上禁用 Select2 ：

破坏

还原 Select2 对 DOM 所做的更改。通过 Select2 完成的任何选择都将被保留。

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

克隆该行并将其克隆插入 DOM 后，您需要在两个选择元素（原始元素和新克隆的元素）上启用 select2。

这是一个 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();
    });
});

您必须在克隆之前先销毁 select2，但 .select2('destroy') 不起作用。用这个：

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

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

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

我在尝试动态向表中添加一行时遇到了同样的问题。（该行包含多个 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。我希望这也适用于其他人。

我实际上已经创建了帐户来回答这个问题，因为我花了一段时间才让它工作。

这在克隆前使用时不起作用： $('.selectpicker').select2('destroy')

但这在我的情况下有效：

$('.selectpicker').select2('destroy');
$('.selectpicker')
    .removeAttr('data-live-search')
    .removeAttr('data-select2-id')
    .removeAttr('aria-hidden')
    .removeAttr('tabindex');

只需删除 select2 添加的所有附加属性。

编辑 #1

好的，似乎您还必须从正在克隆的元素中删除 ID，因为 select2 尝试添加自己的唯一 ID，但当您没有在选择上找到时，它会变得混乱，而 selet2 仅附加在最后一个具有相同 ID 的元素。

您必须在克隆之前先销毁所有 select2，例如：

    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();