Select2为单击时生成的第一个项初始化，然后在单击时生成新的div项时，select2属性从第一个项中删除并在第二个项上初始化。
$(document).ready(function(){
$("#packages #add_package").on("click", function(){
$(this).before(
"<div class='col-12 packageCard'>"+
"<div class='col-4'>"+
"<div class='form-group'>"+
"<label>Container Type</label>"+
"<select name='cntType' id='cntType' class='form-control select2' data-dropdown-css-class='select2' style='width: 100%;'>"+
"<option value='0' selected='selected' disabled>Select Container Type</option>"+
"<option>20 feet</option>"+
"<option>40 feet</option>"+
"</select>"+
"</div>"+
"</div>"+
"</div>");
$('.select2').select2();
});
})
1条答案
按热度按时间tkclm6bt1#
如果您检查浏览器的devtools控制台，当您尝试添加第二个select 2时，您将看到抛出Javascript错误：
没有为Select 2定义未捕获的查询函数undefined
如果您搜索该错误，您将发现一些其他问题，例如："query function not defined for Select2 undefined error"
如果你仔细阅读答案和评论，你会发现有几条描述了你正在做的事情：
如果选择控件已经被.select2（{}）方法初始化，通常会发生这个问题。一个更好的解决方案是首先调用destroy方法。例如：$（“#我的选择控件”）.选择2（“销毁”）.选择2（{}）;
另一个可能的原因是，您试图在已经“select 2 ed”的输入上调用select 2（）方法。
我也遇到了这个问题，确保你不要初始化select 2两次。
......可能还有更多。这些描述了你正在做的事情--在已经初始化为select 2s * 的元素 * 上调用
.select2()。第二次运行$('.select2').select2()时，它试图初始化你的新select 2，它再次将第一个select 2初始化为select 2。您的代码中还有另一个问题-每个select都有相同的ID：
id='cntType'.ID在页面上必须是唯一的，因此这是无效的HTML。我们可以同时解决这两个问题，方法是跟踪页面上有多少个选择，并为每个新的选择赋予一个包括其编号的ID，例如
cntType-1、cntType-2等。然后，我们可以只将新的ID作为目标，将其初始化为select 2。下面是一个工作示例。
第一个