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

Question

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

一切都完美加载，但是当我 select 在下拉 select 列表中选择一个选项时，整个 select 会因为像这样在上面添加 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>

我从这里去哪里？我该如何解决这个问题？看起来是一件小事，但它现在真的让我心烦意乱。想了很久了。

希望有人愿意帮忙。

谢谢。

Answer 1

我有类似的问题，当 select 在提交和重新渲染 Backbone 模板时消失。在我的例子中调用 $('.selectpicker').selectpicker('render');固定它。

Answer 2

这是因为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);}

玩得开心:)

Answer 3

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

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

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

Bootstrap-select.js - After selecting an option, entire select disappears

javascript

jquery

magento

twitter-bootstrap

magento-1.9