如何将动态DOM元素转换为Select2

How to turn dynamic DOM element into Select2?

本文关键字：转换 Select2 元素 DOM 动态      更新时间：2023-09-26

我有以下HTML代码:

<input type="text" id="condition_value_1">
<span class="click_me">Click Me</span>

我正在用SELECT类型替换#condition_value_1元素，如下所示，并试图将最近的SELECT转换为Select2:

$(function() {
  $('.click_me').click(function(ev) {
    var condition_value_1 = $('#condition_value_1');
    var select_html = '<select name="condition_value_1" id="condition_value_1"></select>';
    condition_value_1.replaceWith(select_html);
    $('body').on('DOMNodeInserted', '#condition_value_1', function() {
      $(this).select2({
        placeholder: 'Start typing ...',
        tags: true
      });
    });
  });
});

但是不工作，因为元素保持作为一个正常的HTML选择类型，并没有变成一个Select2。这里有一把小提琴给你弹。我使用jQuery 1.12.4和选择4.0.3。

如何将动态元素转换为Select2元素?任何帮助吗?

似乎为我工作，如果不使用DOMNodeInserted事件绑定。

当replaceWith()方法被调用时，可以假设元素已经被添加到DOM中。

JS提琴更新

$(function() {
  $('.click_me').click(function(ev) {
    var condition_value_1 = $('#condition_value_1');
    var select_html = '<select name="condition_value_1" id="condition_value_1"></select>';
    condition_value_1.replaceWith(select_html);
    $('#condition_value_1').select2({
        placeholder: 'Start typing ...',
        tags: true
      });
  });
});
相关文章：