选择在 Bootstrap 面板中不起作用答案

【问题标题】：Selectize not working inside Bootstrap panel选择在 Bootstrap 面板中不起作用
【发布时间】：2014-08-17 10:27:14
【问题描述】：

我在我的项目中使用 selectize.js 0.10.1 和 Bootstrap 3.0.1。当我在可折叠的 Bootstrap 面板之外选择组合框时，一切都很好，如图所示。

工作代码：

<section class="container">
    <div class="row" style="margin-bottom: 20px">
        <div class="col-lg-4">
            <select id="zastoj" placeholder="Razlog zastoja" class="demo-default selectized"></select>
        </div>
    </div>
</section>

当我在可折叠面板中选择组合框时，组合框无法在单击时打开/展开，看起来它是只读的。

非工作代码：

<section class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Operacije</h3>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <select id="zastoj2" placeholder="Razlog škarta" class="demo-default selectized"></select>
            </div>
        </div>
    </div>
</section>

当我在这个fiddle 中使用 Bootstrap 2.3.2 和 selectize.js 0.9 时，它可以工作，但我无法在这个 fiddle 中使用 Bootstrap 3.1.1 和 selectize.js 0.9 .我什至尝试选择 0.10.1，但没有运气。

这可以解决还是某种版本问题？我需要在我的项目中使用 Bootstrap 3.0+。

【问题讨论】：

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3 selectize.js

【解决方案1】：

我知道我参加聚会有点晚了，但是当selectize 使用选项初始化时我遇到了类似的问题：

dropdownParent: "body"

如果您在 selectize 初始化中有此选项，请将其删除。

【讨论】：

谢谢。这是一个很好的解决方案。你拯救了这一天！

【解决方案2】：

面板有css样式

overflow:hidden;

这就是使选择控件不显示的原因。您可以对样式进行硬编码或将其添加到样式表中。

<section class="container">
<div class="panel panel-primary" style="overflow:visible;">
    <div class="panel-heading">
        <h3 class="panel-title">Operacije</h3>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
            <select id="zastoj2" placeholder="Razlog škarta" class="demo-default selectized"></select>
        </div>
    </div>
</div>
</section>

或在您的样式表中：

.panel, .panel-default, .panel-primary {
    overflow: visible;
}

【讨论】：

【解决方案3】：

对于那些使用 selectize.js 和 AngularJS 的人，确保 <select> 不在 <div ng-if="..."> ... </div> 内，因为它不会工作。相反，请改用ng-show 和ng-hide。这也涵盖了<select> 包含在模态中的场景。

示例：

<!-- This won't work -->                                
<div ng-if="condition == true">
    <select id="my-selectize"></select>
</div>

<!-- This will work -->                             
<div ng-show="condition == true">
    <select id="my-selectize"></select>
</div>

【讨论】：