jQuery克隆表格<tr>导致Select2组件失效问题咨询

当前场景：

• 表单内带single-select类的下拉框基于Select2库实现增强功能（滚动选择、搜索等）
• 通过jQuery克隆表格行时，新克隆的下拉框退化为原生普通下拉，丢失Select2所有增强特性

原表单核心代码（表格行部分） #

<table class="table tableDetail">
  <thead>
    <tr>
      <th>Ruangan</th>
      <th>Nama Barang</th>
      <th>Jumlah</th>
      <th>Keterangan</th>
      <th>Aksi</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="form-group">
          <select class="single-select" name="id_ruangan[]">
            <!-- 动态生成的选项内容 -->
          </select>
        </div>
      </td>
      <td>
        <div class="form-group">
          <select class="single-select" name="id_barang[]">
            <!-- 动态生成的选项内容 -->
          </select>
        </div>
      </td>
      <!-- 其他表单元素 -->
      <td>
        <div class="form-group">
          <button type="button" class="btn btn-xs btn-primary" id="tambahRow"><i class="fa fa-plus"></i></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

原克隆逻辑代码 #

$(document).ready(function() {
    $('#tambahRow').click(function() {
        var clone = $('table.tableDetail tbody tr').first().clone();
        clone.find('input, textarea').val('');
        clone.find('#tambahRow').attr('id', 'deleteRow').removeClass('btn-primary').addClass('btn-danger').html('<i class="fa fa-trash"></i>');
        $('table.tableDetail tbody').append(clone);
    });

    $('table.tableDetail').on('click', '#deleteRow', function() {
        $(this).closest('tr').remove();
    });
});

问题原因分析 #

• Select2不是原生DOM组件：它会替换原生<select>元素，生成自定义的HTML结构（带样式的下拉容器、搜索框等），同时给原始元素绑定专属事件和数据。
• 直接克隆已初始化Select2的行：克隆的只是原生<select>的基础DOM结构，Select2动态生成的增强结构、绑定的事件并不会被复制——这些是初始化后额外添加的，不在原始克隆的DOM范围内。
• 克隆后的<select>未重新初始化Select2：所以只会显示原生下拉的默认样式，丢失所有增强功能。

解决方案 #

需要在克隆行后，对新行内的single-select元素重新初始化Select2。推荐两种实现方式：

方式1：临时销毁原始行的Select2再克隆 #

$(document).ready(function() {
    // 初始化页面上所有Select2
    $('.single-select').select2();

    $('#tambahRow').click(function() {
        var originalRow = $('table.tableDetail tbody tr').first();
        // 临时销毁原始行的Select2，还原为原生select
        originalRow.find('.single-select').select2('destroy');
        
        // 克隆行并重置内容
        var clone = originalRow.clone();
        clone.find('input, textarea').val('');
        clone.find('#tambahRow').attr('id', 'deleteRow').removeClass('btn-primary').addClass('btn-danger').html('<i class="fa fa-trash"></i>');
        
        // 添加克隆行到表格
        $('table.tableDetail tbody').append(clone);
        
        // 重新初始化所有Select2（包括原始行和新克隆行）
        $('.single-select').select2();
    });

    $('table.tableDetail').on('click', '#deleteRow', function() {
        $(this).closest('tr').remove();
    });
});

方式2：使用隐藏模板行（更优） #

提前准备一个未初始化Select2的隐藏模板行，克隆后直接初始化新行的Select2，避免反复销毁/重建原始行的组件：

<!-- 新增隐藏的模板行，放在表格外 -->
<div style="display:none;" id="rowTemplate">
  <tr>
    <td>
      <div class="form-group">
        <select class="single-select" name="id_ruangan[]">
          <?php foreach ($dataRuangan as $data) : ?>
          <option value="<?= $data->id_ruangan ?>"><?= $data->nama_ruangan ?></option>
          <?php endforeach; ?>
        </select>
      </div>
    </td>
    <td>
      <div class="form-group">
        <select class="single-select" name="id_barang[]">
          <?php foreach ($dataBarang as $data) : ?>
          <option value="<?= $data->id_barang ?>"><?= $data->nama_barang ?></option>
          <?php endforeach; ?>
        </select>
      </div>
    </td>
    <td>
      <div class="form-group">
        <input type="number" min="1" class="form-control" name="jumlah[]" value="1">
      </div>
    </td>
    <td>
      <div class="form-group">
        <textarea name="keterangan[]" class="form-control"></textarea>
      </div>
    </td>
    <td>
      <div class="form-group">
        <button type="button" class="btn btn-xs btn-danger deleteRow"><i class="fa fa-trash"></i></button>
      </div>
    </td>
  </tr>
</div>

对应的JS代码：

$(document).ready(function() {
    // 初始化页面上的Select2
    $('.single-select').select2();

    $('#tambahRow').click(function() {
        // 克隆模板行
        var clone = $('#rowTemplate tr').clone();
        // 添加到表格
        $('table.tableDetail tbody').append(clone);
        // 单独初始化新行的Select2
        clone.find('.single-select').select2();
    });

    $('table.tableDetail').on('click', '.deleteRow', function() {
        $(this).closest('tr').remove();
    });
});

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