初始化动态添加的select2

Jon 发表于 Dev

乔恩

我已经动态添加了select2，但是它不会初始化。我尝试使用以下代码（可在stackoverflow本身上找到），但无法正常工作，请检查我的小提琴以获得代码。向我建议我在代码中错过的内容。提前致谢

function initializeSelect2(selectElementObj) {
    selectElementObj.select2({
        tags: true
    });
}

$(".select-to-select2").each(function() {
    initializeSelect2($(this));
});

不兑现

提供的示例存在一些问题：

select2已经被应用到所有.select2下拉菜单中，而此行没有任何选项：$('.select2').select2();
$(".select-to-select2").each什么都不做，因为class没有下拉列表select-to-select2。（此外，不需要each，您可以传递$(".select-to-select2")给initializeSelect2。）
附加到的字符串wrapper不是有效的HTML。最后的“删除”链接应该在包装内.row div。
id对于页面必须是唯一的。在添加了更多相同的完全相同的下拉菜单之后，它们具有与以前相同的ID /名称，因此这将导致无法预料的行为（旧的下拉列表可能会丢失其select2，只有新的下拉列表会获得它）。例如，您不能使用多个元素id="pgm_que_ans1"，而下一个元素必须有所不同。
在此调用，initializeSelect2(wrapper)，wrapper不指定下拉菜单来选择适用于2：，最好是新的HTML保存到一个变量（例如var $newSelects('html here');，一旦被添加到DOM，通止.select2内s到initializeSelect2，如wrapper.append($newSelects); initializeSelect2($newSelects.find('.select2'))