知识点
相关文章
更多最近更新
更多Select2在Bootstrap 3 Modal框中不能搜索的解决方法
2019-03-22 17:29|来源: 网路
在项目中用了Select2，基于Bootstrap 3的搜索下拉框。但奇怪的是，在modal-dialog中的搜索功能竟不能用。
在网上查有人说在modal中去掉tabindex="-1"
github上说：
Fix z-index for modals
Select2 did not previously have a high enough `z-index` for it to
be displayed over modals. The `z-index` has been raised to 1051,
so now it should appear over the jQuery UI and Bootstrap modals.
解决方案是在js 里加上$.fn.modal.Constructor.prototype.enforceFocus =function(){};
以下是我找到的文章，http://www.pavlatka.cz/2014/04/enable-search-select2-bootstrap-3-modal/
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/select2/select2.js"></script>
<script type="text/javascript">
$.fn.modal.Constructor.prototype.enforceFocus = function () {};
</script>
....
</head>
相关问答
更多-
使用Select2 4.0和Bootstrap 3+设计jQuery验证样式(Styling jQuery Validation with Select2 4.0 and Bootstrap 3+)[2024-02-14]
我尝试搜索其他SO，但所有这些都使用select2的3.5.xx版本 各种版本没有秘密公式。 只需蛮力就可以知道你的情况。 这意味着您需要检查呈现的DOM，以了解要定位哪些元素以及如何定位它们。 写入以呈现的Select2元素为目标的CSS。 所以，只要父容器的类has-error ，Select2元素就会被这样设置。 .has-error .select2-selection { border: 1px solid #a94442; border-radius: 4px; } 要在Sel ... -
在application.js和application.css中需要select2 *= require select2 (application.css) //= require select2 (application.js) require select2 in application.js and application.css *= require select2 (application.css) //= require select2 (application.js)
-
只需在加载模式事件上初始化datepicker或其他东西： $('#myModal').on('shown.bs.modal', function () { $('#myInput').datepicker(); }) 这是doc ： http ： //getbootstrap.com/javascript/#modals-events I found solution and it little bit strange. HTML inside the modal was replaced ...
-
您的印象是正确的： Bootstrap4XPages插件的最新（1月）版本包含两个Select2控件： “Select2 Picker for Combo / Listbox”是最简单的一个，可以附加到Listbox或Combobox控件：将其拖到页面上，指定要将其附加到的控件的ID（“for”属性）和你'重做。 “Select2 Picker”更复杂，可以附加到输入控件上。 此控件的实现方式与扩展库中的值选择器相同，并允许使用不同的数据提供程序（例如bean，视图，全文搜索，以及简单的值列表）。 我正在更 ...
-
使用bootstrap文档和一些开发工具，我找到了一个解决方案。 需要在select2容器上创建工具提示，因为select2隐藏了原始标记。 重新使用原始title属性，您可以在服务器上呈现它。 $(".select2-container").tooltip({ title: function() { return $(this).prev().attr("title"); }, placement: "auto" }); 工作样本： https ： //jsfid ...
-
移动$（“。datepicker”）。datepicker（）; 在ajax内部成功（见下文）为我解决了这个问题。 $( document ).ready(function() { $('#newCall').on('show.bs.modal', function (e) { var id = $(e.relatedTarget).data('id'); $.ajax({ type : 'post', url : '../includ ...
-
你能包含你生成的HTML代码吗？ 我认为问题是你的选择器$（“。select2”） 。 select2函数中的js代码对我来说没问题。 尝试将select的id放在jQuery函数中。 例如，如果你生成的html代码是 你应该使用$（'＃my_super_selector'）。 试一试，让我知道！ 干杯! Can you include your ...
-
正确加载命令jQuery，Bootstrap和select2 .js文件(Correct loading order jQuery, Bootstrap and select2 .js files)[2023-10-21]
您将始终需要在 bootstrap 之前加载jQuery或依赖它的任何其他插件。 我喜欢首先将我的链接/引用命名为JavaScript，然后确保每个引用都是按各自的插件排序的，但这只是我个人的偏好。