Laravel模态框内动态表格的search-select无法使用select2如何解决？

你遇到的问题本质是初始化select2的时机早于动态DOM插入时机，导致初始化时目标.search-select元素还不存在，没有被select2绑定，再加上模态框本身的焦点限制、下拉容器配置错误的叠加影响。

• 确认DOM存在性：AJAX执行append操作后，在浏览器控制台运行$('.search-select').length，如果返回值为0，说明你之前的初始化逻辑执行在append之前，没有命中目标元素。
• 确认依赖加载正常：控制台运行typeof $.fn.select2，如果返回undefined，说明select2的JS文件未引入，或者引入顺序在jQuery之前，依赖加载失败。
• 确认无重复初始化：如果目标select已经被初始化过（带有select2-hidden-accessible类），重复调用select2()方法会导致失效，需要先销毁旧实例再初始化。
• 确认焦点限制已取消：如果能触发下拉框但搜索框无法输入，说明Bootstrap模态框的默认焦点拦截规则未关闭，拦截了select2搜索框的输入事件。

1. 调整AJAX回调逻辑，动态插入内容后立刻初始化select2 #

修改你的AJAX请求成功后的处理代码：

// 原有动态内容插入逻辑
$('.bill_diseases').append(data.disease)
$('.medical_packages').append(data.medical)
$('.vetting').append(data.vetting)

// 新增select2初始化逻辑
$('.search-select').each(function() {
    // 销毁已存在的select2实例，避免重复初始化报错
    if ($(this).hasClass('select2-hidden-accessible')) {
        $(this).select2('destroy')
    }
    // 初始化select2，绑定下拉容器为当前模态框，解决下拉被遮挡问题
    $(this).select2({
        dropdownParent: $('#vetting-modal'),
        placeholder: "请选择调整原因",
        allowClear: true,
        width: '100%'
    })
})

2. 关闭Bootstrap模态框的强制焦点限制 #

在页面公共JS中加入以下代码，解决select2搜索框无法输入的问题：

// Bootstrap 3 版本用这个
$.fn.modal.Constructor.prototype._enforceFocus = function() {}

// Bootstrap 5 版本用这个
// $.fn.modal.Constructor.prototype._initializeFocusTrap = function() { 
//   return { activate: function() {}, deactivate: function() {} } 
// }

你在控制器中直接给select标签写的placeholder属性原生select不识别，统一放在select2初始化参数中即可。

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