模态框表格行动态追加Select2无效，如何启用？

动态生成的Select2变成无搜索功能的普通下拉，核心问题出在动态元素未手动初始化，再加上Bootstrap模态框的层级可能遮挡下拉面板，按下面的步骤就能解决：

1. 动态生成后立刻初始化Select2 #

必须等新的下拉框插入到DOM结构里之后，再调用Select2的初始化方法，不然jQuery找不到目标元素。比如你追加表格行的代码可以改成这样：

// 生成带选项的下拉框和表格行
var selectContent = '<select class="form-select my-select"><option value="1">选项A</option><option value="2">选项B</option></select>';
var newTr = '<tr><td>' + selectContent + '</td></tr>';
// 把行加到表格中
$('#your-table').append(newTr);
// 给刚添加的下拉框初始化Select2
$('#your-table').find('.my-select').last().select2({
  // 关键配置：将下拉面板挂载到模态框内，避免被遮挡
  dropdownParent: $('#your-modal'),
  placeholder: '请选择',
  allowClear: true
});

重点：一定要在元素已经插入页面DOM之后再调用.select2()，提前调用不会生效。

2. 处理模态框层级冲突 #

Bootstrap模态框的默认层级较高，Select2的下拉面板容易被它挡住，导致搜索框无法正常显示。上面代码里的dropdownParent参数，就是把Select2的下拉面板放到模态框内部，完美解决层级遮挡问题。

3. 检查依赖加载顺序 #

别搞混JS文件的加载顺序，必须按以下顺序引入：

• jQuery 3.3.1
• Bootstrap 5.0.2 的JS文件
• Select2 4.1 的JS文件
  另外别忘了引入Select2的CSS文件，否则样式会混乱，搜索框也无法正常显示。

4. 避免重复初始化 #

如果需要多次添加表格行，记得只初始化最新添加的那个下拉框，重复初始化可能导致功能异常。用.last()就能精准选中刚添加的元素，像上面代码里那样操作即可。

完整示例代码 #

给你一个可直接参考的完整代码片段：

<!-- 模态框结构 -->
<div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <table id="dynamic-table" class="table">
          <tbody></tbody>
        </table>
        <button id="add-row" class="btn btn-primary">新增行</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
  $('#add-row').click(function() {
    // 生成带选项的下拉框
    var selectHtml = `
      <select class="form-select my-select">
        <option value="1">产品1</option>
        <option value="2">产品2</option>
        <option value="3">产品3</option>
      </select>
    `;
    // 生成表格行并追加到表格
    $('#dynamic-table tbody').append('<tr><td>' + selectHtml + '</td></tr>');
    // 初始化刚添加的Select2组件
    $('#dynamic-table tbody .my-select').last().select2({
      dropdownParent: $('#myModal'),
      placeholder: '选择产品',
      allowClear: true
    });
  });
});
</script>

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