Bootstrap-select.js - 选择一个选项后，整个选择消失答案

【问题标题】：Bootstrap-select.js - After selecting an option, entire select disappearsBootstrap-select.js - 选择一个选项后，整个选择消失
【发布时间】：2015-02-07 14:12:03
【问题描述】：

我正在尝试为我正在开发的网站（Magento 版本 1.9.1.0）设置 bootstrap-select.js，但我遇到了一些我无法解决的问题。

一切都完美加载，但是当我在下拉选择列表中选择一个选项时，整个选择会通过在其上添加 element.style 而消失，如下所示：

style="display:none;"

在 FireBug 中它说：

element.style {
display: none;
}

在此处查看视觉图像：http://i.imgur.com/cg1jkOp.jpg?1

问题是我不知道这个样式是从哪里来的，所以我决定在 FireBug 中检查“Break on attribute change”，看看它说了什么。代码来自 Jquery (jquery-2.1.3.min.js)，如图所示：http://i.imgur.com/Jbu8TCx.jpg?1

这是我在<head> 部分的内容：

<link rel="stylesheet" href="http://localhost/sg-magento/skin/frontend/ultimo/default/css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="http://localhost/sg-magento/skin/frontend/ultimo/default/css/bootstrap/bootstrap-select.min.css">

<script type="text/javascript" src="http://localhost/sg-magento/js/infortis/jquery/jquery-2.1.3.min.js"></script>

<script type="text/javascript" src="http://localhost/sg-magento/skin/frontend/ultimo/default/js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="http://localhost/sg-magento/skin/frontend/ultimo/default/js/bootstrap/bootstrap-select.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($) {
   $('.selectpicker').selectpicker();
});
</script>

我从这里去哪里？我该如何解决这个问题？看似很小的事情，但现在真的让我很紧张。想了很久。

希望有人愿意帮忙。

谢谢。

【问题讨论】：

标签： javascript jquery twitter-bootstrap magento magento-1.9

【解决方案1】：

这是因为 Bootstrap 和 Prototype 冲突。查看更多详情here。创建一个新的JS文件并在其中添加以下代码。

if (Prototype.BrowserFeatures.ElementExtensions) {
var disablePrototypeJS = function (method, pluginsToDisable) {
        var handler = function (event) {
            event.target[method] = undefined;
            setTimeout(function () {
                delete event.target[method];
            }, 0);
        };
        pluginsToDisable.each(function (plugin) { 
            jQuery(window).on(method + '.bs.' + plugin, handler);
        });
    },
    pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip', 'popover'];
disablePrototypeJS('show', pluginsToDisable);
disablePrototypeJS('hide', pluginsToDisable);}

玩得开心:)

【讨论】：

【解决方案2】：

I had similar issue, when select was disappearing on submission and re-render of Backbone template.在我的情况下，调用 $('.selectpicker').selectpicker('render');修复。

【讨论】：

我迟到了，但是如果你收到这个通知，你介意告诉我你把代码放在哪里了吗？

【解决方案3】：

$( ".dropdown-menu > ul > li" ).click(function() {
$( '.bootstrap-select').attr('style', '');
$( this ).parent( '.bootstrap-select').attr('style', '');
});

这将覆盖导致此问题的任何冲突。我不相信前面的任何一个答案都是正确的。而我的 DEF 不是答案。但它会解决问题，直到可以花更多时间找到冲突的真正根源。原型可能是原因，但原型答案不起作用！

【讨论】：