javascript - 初始化动态添加的select2

Question

我动态添加了 select2，但它不会初始化。我尝试使用以下代码(在 stackoverflow 本身上找到)，但它不起作用，请检查我的 fiddle 代码。建议我在代码中错过了什么。 提前致谢

Check this

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

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

Answer 1

所提供示例的一些问题:

• 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 未指定对哪些下拉列表应用 select 2:，最好将新 HTML 保存到变量 (例如 var $newSelects('html here');，将其添加到 DOM 后，仅将其中的 .select2 传递给 initializeSelect2，例如wrapper.append($newSelects);initializeSelect2($newSelects.find('.select2'))

这是一个将所有内容组合在一起的演示:

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