Bootstrap动态ID模态框中Select2失效，如何用jQuery选择器定位？

环境 #

• jQuery 3.6.1
• Select2 4.1.0
• Bootstrap 动态模态框

问题 #

Select2组件放在ID为edit{{$item->id}}的Bootstrap动态模态框内时，搜索输入框无法获取焦点，上下方向键也失效。

问题根源 #

你之前的代码里，dropdownParent的选择器$('#edit{id}')无效——Laravel动态生成的模态框ID是edit{{$item->id}}，这里未正确带入变量；另外Select2默认将下拉框挂载到body上，会和模态框的焦点、层级管理冲突，必须让下拉框嵌套在模态框内部才能正常工作。

修复方案 #

方案一：监听模态框显示事件，动态初始化 #

适合批量处理所有动态模态框内的Select2：

// 监听所有模态框的显示完成事件
$('.modal').on('shown.bs.modal', function() {
  // 定位当前模态框内的Select2元素并初始化
  $(this).find('.js-example-placeholder-single').select2({
    dropdownParent: $(this), // 指定下拉框父容器为当前模态框
    placeholder: "选择分类" // 可选，添加占位符提示
  });
});

方案二：针对单个模态框绑定ID初始化 #

如果是Laravel循环生成的模态框，可在每个模态框对应的脚本中带入ID变量：

<!-- 在模态框HTML后添加对应初始化脚本 -->
<script>
$(function() {
  $('.js-example-placeholder-single').select2({
    dropdownParent: $('#edit{{ $item->id }}')
  });
});
</script>

注意事项 #

• 保留模态框的tabindex="-1"属性，这是Bootstrap模态框的必要配置。
• 不要在页面加载时全局初始化所有.js-example-placeholder-single，动态生成的模态框在页面加载完成时可能还未渲染，通过模态框shown.bs.modal事件触发初始化更可靠。

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