Select2 弹窗中不能输入的解决方法

将一个 Select2 下拉框放在弹窗（Modal/Dialog）中时，你可能会遇到两个常见问题：下拉菜单被弹窗遮挡住，或者搜索框无法正常输入文字。这是因为 Select2 默认将下拉菜单渲染在 body 元素下，导致 z-index 和事件捕获方面出现冲突。

解决方法

Select2 提供了 dropdownParent 配置项，可以指定下拉菜单的容器元素。将其指向弹窗的容器即可：

$("#yourSelect").select2({
  dropdownParent: $("#yourModalId")
});

将 #yourModalId 替换为你的弹窗元素 ID。修改后下拉菜单会正确地跟随弹窗滚动，层级也能够正常显示。

注意： Bootstrap Modal 用 #myModal，Element UI / Ant Design Dialog 用对应的 dialog 容器 class 或 ref。

参考

https://select2.org/dropdown