点击按钮动态创建的select2多选框不生效如何解决

页面初始加载时执行的$('.main_select2').select2(...)仅会对当时已经存在于DOM树中的、携带main_select2类名的下拉框执行初始化。后续通过点击按钮动态追加到页面中的select元素，没有被执行过select2初始化逻辑，因此会展示为原生下拉样式，该问题和是否使用多class绑定没有关联。

只需要在每次向页面插入新的select节点后，对新插入的、未初始化的节点单独执行select2初始化即可，原有CSS和HTML结构不需要调整。

最简实现代码 #

修改原有JS逻辑如下：

// 初始化页面加载时已存在的select2组件
$('.main_select2').select2({
  placeholder: 'Selection Box',
  allowClear: true
});

$('#add_select').on('click', function() {
  // 拼接新下拉框的HTML结构并插入容器
  const newSelectTpl = `
  <div class="c-input c-input--select c-input--icon">
    <select class="select2 main_select2">
      <option>Choose 1</option>
      <option>Choose 2</option>
      <option>Choose 3</option>
    </select>
  </div>`;
  $('.for_select').append(newSelectTpl);

  // 针对刚插入的最后一个下拉框执行select2初始化
  $('.for_select .main_select2:last').select2({
    placeholder: 'Selection Box',
    allowClear: true
  });
});

优化方案（避免重复初始化） #

如果后续逻辑复杂，担心重复对已经初始化过的select调用select2方法报错，可以新增一个标记类识别已初始化的节点，封装通用初始化方法：

// 封装通用select2初始化方法，仅处理未初始化的节点
function renderSelect2(context = document) {
  $(context).find('.main_select2:not(.is-select2-rendered)').select2({
    placeholder: 'Selection Box',
    allowClear: true
  }).addClass('is-select2-rendered');
}

// 页面首次加载时初始化全量符合条件的下拉框
renderSelect2();

$('#add_select').on('click', function() {
  const newSelectTpl = `
  <div class="c-input c-input--select c-input--icon">
    <select class="select2 main_select2">
      <option>Choose 1</option>
      <option>Choose 2</option>
      <option>Choose 3</option>
    </select>
  </div>`;
  // 插入新节点后，仅针对新节点范围内的下拉框做初始化
  const $newNode = $(newSelectTpl).appendTo('.for_select');
  renderSelect2($newNode);
});

原有CSS样式不需要修改，可直接保留：

.main_select2{
  width:200px;
  margin-top:10px;
}

内容的提问来源于stack exchange，提问作者HarLton Hinon