javascript - 初始化动态添加的select2

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

Check this

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

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

最佳答案

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


select2已经被应用到所有.select2下拉列表，并且没有与此行相关的任何选项：$('.select2').select2();
$(".select-to-select2").each不执行任何操作，因为类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到initializeSelect2，例如wrapper.append($newSelects); initializeSelect2($newSelects.find('.select2'))


这是一个包含所有内容的演示：

http://jsfiddle.net/qw3y821g/1/