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

2023年5月13日 229次阅读

我有以下
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 Select类型并且不会变成Select2,因此无效.这是一个Fiddle供你玩.我使用的是jQuery 1.12.4和Select 4.0.3.

如何将动态元素转换为Select2元素？有帮助吗？

最佳答案 如果不使用DOMNodeInserted事件绑定,似乎对我有用.

假设在调用replaceWith()方法时已将元素添加到DOM中,这是公平的.

JS Fiddle updated

$(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
      });
  });
});
点赞