我想做的事情的本质已经在this SO question中提出并回答了。这个问题包括一个小提琴和代码,这些小提琴和代码在以前的版本select 2(v3。3.2),但在使用当前版本(4.我已经使用这个问题的代码创建了两个带注解的小提琴,它也显示了我在项目小提琴中遇到的问题和错误。
来自SO问题#17175534的Fiddles
v3.3.2(工作):https://jsfiddle.net/24chd7t9/
v4.0.13(断开):https://jsfiddle.net/ka19ez4L/
基本上,我试图实现与上述问题非常相似的结果,但使用最新的稳定select 2版本(4。切换到以前的版本会给我的项目带来一些其他问题,所以我希望在当前版本中可以实现这一点。
说明:
我有一个表,每行包含一个带有select 2下拉列表的列。最初,该表只有一个这样的行,但有一个按钮允许用户添加行。
当单击“Add”客户按钮时,将运行以下代码块。创建新行后,它克隆select 2元素并将其附加到新行的第二列。
$("#add-cust").click(function () {
let table = document.getElementById("job-customers");
let last_customer = parseInt(table.tBodies[0].rows.length, 10);
let new_customer = last_customer+1;
var row = table.insertRow(-1);
row.setAttribute('id', 'row-customer-'+new_customer);
row.setAttribute('class', 'customer');
let cell1 = row.insertCell(-1);
let cell2 = row.insertCell(1);
cell1.innerText = new_customer;
//LOOP ROWS IN TBODY COL2 & DESTROY SELECT2 ELEMENTS
$("#job-customers").find("tbody td:nth-child(2)").each(function () {
$(this).children("select")
.select2("destroy")
.end();
});
//CLONE & APPEND
$("#row-customer-" + last_customer + " td:nth-child(2)")
.children("select").clone()
.appendTo(cell2);
$('.select2').select2();
});
Fiddles:(两者中的代码完全相同)
使用select 2 v3的JSFiddle。3.2:https://jsfiddle.net/07Lgxdyt/(工作)
使用select 2 v4的JSFiddle。0.13:https://jsfiddle.net/97mrx1jL/(损坏)
在4.0.13 fiddle,插入新行并克隆select 2元素,但前一行的元素不再起作用。再次单击Add会中断所有select 2功能,并导致以下错误:
对未使用Select 2的元素调用了select 2('destroy')方法。
我怀疑这与当前版本如何在DOM中创建select 2元素有关,但不确定。代码$('.select2').select2();
似乎没有重新初始化4中先前被破坏的select 2元素。0.13版本。我尝试过使用不同的选择器来重新初始化前一行下拉列表上的select 2(),甚至为每个下拉列表/行编写特定的选择器,但错误消息总是相同的。我在select 2 v4的发行说明中也没有看到任何似乎适用的东西。
任何帮助故障排除或获得过去这个错误将不胜感激。
1条答案
按热度按时间ddarikpa1#
在做了一些迭代测试之后,我能够解决这个问题。
如果其他人遇到这种情况,问题是在当前版本中,多个select2元素不能使用相同的id,尽管在select2的早期版本中似乎不是这样。
为了解决这个问题,我只是在每次克隆select2元素时分配一个新的ID。请参阅下面克隆和分配id的代码,其中newidval是递增的元素ID
下面是最终的工作JSFiddle:https://jsfiddle.net/nm3ey6w7/