我正在尝试使用select2在我的项目中。
在下面的屏幕截图中，我想在用户访问后动态复制社交媒体部分(包括 select2、input 和 remove btn)单击添加更多按钮:
为了避免冲突，我在点击事件开始时为所有 select2 调用 destroy 事件。然后，我将复制这些元素。然后，我将重新初始化 select2。但是，它始终只会将一个选择转换为 select2。
在下面的屏幕截图中，您可以看到重复的选择未转换为 select2:
以下代码片段显示了问题:
<!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>您能否指导我如何解决此问题并重新初始化所有重复的选择元素？
最佳答案
出现此问题的原因是 Select2 要求 select 标记是唯一的，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>关于javascript - 如何动态复制转换为 select2.js 的 select 标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54776645/