select2在bootstrap modal中不能正常使用问题

最新推荐文章于 2025-10-07 20:11:31 发布
原创 最新推荐文章于 2025-10-07 20:11:31 发布 · 7.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootstrap #select2 #前端框架

本文介绍了解决Select2单选框在Bootstrap模态框中无法正常工作的问题，包括无法获取焦点进行智能过滤的情况。提供了两种解决方案，一种是在bootstrap.js中修改源码，另一种是调整模态框的tabindex属性。

最近用bootstrap做前端框架，遇到select2单选框在bootstrap modal中不能正常使用，输入框不能获取焦点智能过滤；如下图：


解决方法一：在bootstrap.js的模态框js内加上

$.fn.modal.Constructor.prototype.enforceFocus = function() {};
如图：


第二种情况，网上看到的，不是我的体验：

他是说：由于 select2和bootstrap模态框一起使用导致select2的input获取不到焦点问题

解决办法：是把页面中的模态框的属性  tabindex="-1" 删掉, 或者值改为1

如图：


我这样做了，并没有解决，所以然并卵。。。。。。只是写在这里，担心这样也是一种情况而已！

再次说明：我是第一种方法解决的

解决select2在bootstrap modal中不能正常使用的问题
10-18
今天小编就为大家分享一篇解决select2在bootstrap modal中不能正常使用的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
快速解决select2在bootstrap模态框中下拉框隐藏的问题
10-18
这篇文章针对在Bootstrap模态框中使用Select2插件时出现的下拉框隐藏问题提供了解决方案。Select2是一个将标准的HTML select元素转换为可搜索的下拉框的jQuery插件，广泛应用于Web开发中以提供更好的用户体验。...
bootstrap 的模态框无法获取焦点
钟渊博客
11-05 5833
方法一： 重写 bootstrap 的focus 方法 $(document).ready(function(){ $.fn.modal.Constructor.prototype.enforceFocus = function() { $("#form").focus(); }; })这种方式有个缺点就是模态框加载时某一个组件只能获取焦点，再次点击就不能获取
在BootStrap的modal中使用Select2
热门推荐
燃烧JAVA
09-13 1万+
在普通页面中使用Select2是正常的，但是在Modal中使用就发现了一些问题，首先如果在页面加载完成后就调用 $(".select2").select2();是会有问题的，你会发现Modal框中的select显示不正常，正确的做法是要改成 $("#editModal").on("shown.bs.modal", function(){             $(".select2").s
Bootstrap5 模态框Modal内select2搜索框无法使用的官方解决方案
最新发布
cc010的博客
10-07 167
近期使用bootstrap5进行前端开发，发现将select2放入模态框（Modal）后，其快速检索文本输入框无法获取焦点，也无法输入字符（如下图）。第三步：在页面载入完成，或者模态框（Modal）显示等过程中调用以上方法，进行输入框渲染，以下代码是在模态框显示按钮点击时进行调用，关键代码为select2_dropdownParent_div(‘f_om’,‘f_om-input’)。第一步：在select2控件下方添加一个新DIV，id为“f_om-input”，用来进行渲染问题输入框。
在BootStrap的modal中使用Select2搜索框无法输入
小虫的专栏
12-07 1万+
用modal来show一个对话框dialog.modal({ backdrop:true, keyboard:true, show:true });然后再modal中初始化select2dialog.find("select").select2({ formatNoMatches: function() { return "没有选项"; },
bootstrap select2搜索框无法输入
秋风伴落叶
09-24 483
通过网上查阅资料 得知 是因为 弹窗modal导致的， 后面修改。
Bootstrap整合select2以及jquery.validate.js校验select2框架失效解决方案
zgphacker2010的专栏
09-08 1449
为了方便，这里上次那个JqueryValidate框架整合bootstrap的demo中拿出来修改了 一、Bootstrap整合select2框架 这里使用的是 jquery select2框架的版本号为Version: 3.4.5 1.下载并导入jquery select2的css和js文件 <!-- 引入jquery select2 css文件--> <link ...
BootStrap模态框和select2合用时input无法获取焦点的解决方法
12-29
在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 解决方法: 1. 把页面中的 tabindex=-1 删掉（测试成功）: <div id=myModal class=modal tabindex=-1 role=...
bootstrap 模态框里面使用select2插件 搜索框无法输入问题
u014528052的专栏
08-20 1050
select2 下面的搜索框 无法输入问题 这时候select2的搜索框无法输入,一般有两方面的原因  1.检查下modal的div中是否有tabindex=”-1”，这个属性 &lt;div class="modal fade in" id="dialog-new-draft"&gt;   2.js代码中加入 $.fn.modal.Constructor.prototype.enf...
解决select2在modal中无法输入的问题
weixin_33739541的博客
03-12 488
解决办法： 在js里加一句 $.fn.modal.Constructor.prototype.enforceFocus = function(){};  
在BootStrap的modal(模态框)中使用Select2(下拉框带搜索框)
weixin_46212682的博客
02-21 4788
github地址：https://github.com/ttskch/select2-bootstrap4-theme 引入Selelct2的CSS文件，按路径查找 其次引入Selelct2的JavaScript文件 地址：https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js 使用，这里我就使用几条数据 <select class="single-select"> <optionvalue=.
bootstrap的select2下拉框在modal弹框下输入框不显示，官方解决办法：设置dropdownParent
lisheng19870305的专栏
08-05 2204
采用select2控件，在bootstrap的modal弹框中，会出现下拉框中没有输入框。网上走一圈，基本上解决办法都是2个，但我要说的是：这2个方法都不是最好的。因为官方就有解决方案，而且非常简单。官方解决办法：设置dropdownParent。...
bootstrap modal 点击按钮modal无反应不弹出
qq_35976548的博客
12-29 4698
Bootstrap Modal无法弹出
Bootstrap modal 水平居中、左/右侧弹出、隐藏时监听、select2被modal覆盖
cocosum
09-17 2055
1、下面是，modal在屏幕正中间显示 let _modal = $('#userModal'); _modal.on('show.bs.modal', function(){ var $this = $(this); var $modal_dialog = $this.find('.modal-dialog'); $this.css('display', ...
bootstrap的Modal窗口的select选项被遮挡（显示不全）
08-22
在使用 Bootstrap Modal 时，常常会遇到 `select` 或 `select2` 等下拉控件显示不全或被遮挡的问题。这种问题通常是因为 Modal 的 `z-index` 或下拉菜单的定位机制导致的。以下是几种解决方案，适用于不同的场景。 ### 使用 `data-container` 属性 Bootstrap 提供了一个 `data-container` 属性，可以将下拉菜单渲染到指定的容器中，从而避免被 Modal 遮挡。适用于 `selectpicker` 或其他基于 Bootstrap 的下拉控件。 ```html <select class="selectpicker" data-container="body"> <option>选项 1</option> <option>选项 2</option> <option>选项 3</option> </select> ``` 通过设置 `data-container="body"`，下拉菜单会被渲染到 `<body>` 下，避免受 Modal 定位影响 [^2]。 --- ### 动态调整下拉菜单的 `z-index` 如果使用的是 `autocomplete` 或某些自定义下拉控件，可以通过 CSS 提高下拉菜单的 `z-index` 值，确保其显示在 Modal 之上。 ```css .ui-autocomplete { z-index: 9999; } ``` 这样可以确保自动补全列表在 Modal 中正确显示，不会被遮挡 [^3]。 --- ### 针对 `select2` 的处理方式 在使用 `select2` 插件时，可以在初始化时添加事件监听器，确保下拉菜单的容器具有正确的定位和层级关系。 ```javascript $(".select2_material").select2(); $(".select2-selection__rendered").on("click", function (e) { setTimeout(function () { $('.select2-container.select2-container--default.select2-container--open').addClass('modal'); }, 100); }); ``` 此方法通过动态添加 `modal` 类来调整 `select2` 的样式，使其适应 Modal 环境 [^4]。 --- ### 手动调整 `dropdown-menu` 的样式 对于 `bootstrap-select` 插件，可以手动绑定事件来调整下拉菜单的最小高度和位置，确保其在 Modal 中显示完整。 ```javascript $("#queryVlan").on('shown.bs.select', function (e) { $('.dropdown-menu').css('min-height', 300); $('.dropdown-menu').css('transform', 'translate3d(0px, 29px, 0px)'); $('#queryVlan').parent().find("input").keydown(function () { $('.dropdown-menu').css('min-height', 240); $('.dropdown-menu').css('transform', 'translate3d(0px, 29px, 0px)'); }); }); ``` 此方法通过动态调整样式，确保下拉菜单在 Modal 中始终可见 [^2]。 --- ### 总结 - **`data-container="body"`**：适用于 `selectpicker`，将下拉菜单渲染到 `<body>`。 - **提高 `z-index`**：适用于 `autocomplete`，确保下拉列表显示在 Modal 上方。 - **动态添加类**：适用于 `select2`，确保下拉菜单适应 Modal 环境。 - **手动调整样式**：适用于 `bootstrap-select`，动态设置下拉菜单的大小和位置。 通过上述方法，可以有效解决 Bootstrap Modal 中 `select` 选项显示不全的问题。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值