如何动态复制转换为 select2.js 的选择标记？答案

【问题标题】：How dynamically duplicate a select tag that is converted to select2.js?如何动态复制转换为 select2.js 的选择标记？
【发布时间】：2019-02-19 23:44:15
【问题描述】：

我正在尝试在我的项目中使用select2。

在以下屏幕截图中，我想在用户点击ADD More 按钮后动态复制社交媒体部分（包括select2、input 和remove btn）：

为避免冲突，我在点击事件开始时为所有select2 调用destroy 事件。然后，我将复制元素。然后，我将重新初始化select2。但是，它总是只会将一个选择转换为select2。

在以下屏幕截图中，您可以看到重复的选择未转换为select2：

下面的sn-p代码说明了问题：

<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<button onclick="duplicate_select();">duplicate</button>
<br/><br/>
<select class="selection" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

<script>
$(document).ready(function() {
    $('.selection').select2();
});

function duplicate_select ()
{
    //Destroy all active select2
    $(".selection").each(function (index, value) {
        var temp_selecte2 = $(value).select2();
        temp_selecte2.select2('destroy');
    });

    //Get First Select Node that I want to duplicate
    var first_node = $('.selection').first().prop('outerHTML');
    
    //Add new node to the body
    $('body').append(first_node);
    
    
    //Re-initialize all select2
    $(".selection").each(function (index, value) {
        var temp = $(value).select2();
        //temp.select2();
    });
    
    //Following codes is not working too
    //$(".selection").select2();
}
</script>

</body>
</html>

您能否指导我如何解决这个问题并重新初始化所有重复的选择元素？

【问题讨论】：

也许这可以帮助stackoverflow.com/a/29972853/1113766
谢谢@JuanCastillo，但这无济于事。特别是因为在这里我想复制一个存在的 select2，但他想在那里添加新的 DOM 作为一个 select2

标签： javascript html jquery-select2

【解决方案1】：

出现问题是因为Select2 要求选择标签是唯一的，select2() 方法通过使用名为data-select2-id 的属性来识别这一点，您唯一需要做的就是修改该属性。

您的问题可以通过删除属性或设置唯一属性来解决。要设置唯一的，只需添加行temp.attr('data-select2-id', new Date().getTime())，但推荐的方法是删除它temp.removeAttr('data-select2-id')

<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<button onclick="duplicate_select();">duplicate</button>
<br/><br/>
<select class="selection" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

<script>
$(document).ready(function() {
    $('.selection').select2();
});

function duplicate_select ()
{
    //Destroy all active select2
    $(".selection").each(function (index, value) {
        var temp_selecte2 = $(value).select2();
        temp_selecte2.select2('destroy');
    });

    //Get First Select Node that I want to duplicate
    var first_node = $('.selection').first().prop('outerHTML');
    
    //Add new node to the body
    $('body').append(first_node);
    
    
    //Re-initialize all select2
    $(".selection").each(function (index, value) {
        var temp = $(value);
        temp.removeAttr('data-select2-id');
        // temp.attr('data-select2-id', new Date().getTime()); // <-- this works too
        temp.select2();
    });
}
</script>

</body>
</html>

【讨论】：