当有更多的值并向上滚动时，引导程序选择bug，它没有显示搜索框。

Question

如果有更少的值，比如

 <select class="selectpicker form-control" multiple data-actions-box="true" data-live-search="true">
                        <option>Mustard</option>
                        <option>Ketchup</option>
                        <option>Relish</option>
                    </select>

​

​

它向下滚动，工作正常，但是当有更多的价值时，比如

<select class="selectpicker form-control" multiple data-actions-box="true" data-live-search="true">
                            <option>Mustard</option>
                            <option>Ketchup</option>
                            <option>Relish</option>
                            <option>Mustard</option>
                            <option>Ketchup</option>
                            <option>Relish</option> <option>Mustard</option>
                            <option>Ketchup</option>
                            <option>Relish</option> <option>Mustard</option>
                            <option>Ketchup</option>
                            <option>Relish</option>
                        </select>

它的行为是这样的

​

未搜索或选择“全部”或“取消选择所有选项”。

解决这个问题吗？

Answer 1

如文档中所述，如果select元素位于一个溢出的元素中:隐藏，那么如果您有许多选项，它将无法滚动，

但是它也提供了解决方案，您可以将select菜单附加到不具有overflow:hidden样式的特定元素，例如data-container='body'或data-container=".main-content"。

示例：

 <div style="overflow:hidden;">
  <select class="selectpicker" id="no-scroll">
    ...
  </select>
  <select class="selectpicker" data-container="body" id="can-scroll">
    ...
  </select>

 </div>

在这里，如果您的父或父的任何父元素都以css作为overflow:hidden，那么当选择元素中有更多的元素时，滚动将无法工作，

与上面的示例一样，在带有id='no-scroll'滚动的select元素中，

但是如果您提供data-container='body'或任何div类，比如具有overflow:visible属性的data-container='.class-with-overflow-visible-property'类，那么它就可以工作了，

参见上面示例中的select元素和id='can-scroll'滚动将按预期工作。

参考资料：https://developer.snapappointments.com/bootstrap-select/examples/#container