Bootstrap Select-Picker 防止关闭答案

【问题标题】：Bootstrap Select-Picker prevent closeBootstrap Select-Picker 防止关闭
【发布时间】：2016-09-22 21:57:58
【问题描述】：

大家好，我正在与Bootstrap Select-picker 合作。我想默认打开下拉列表，而不是关闭焦点时的选择器。

代码：

<select class="selectpicker" multiple data-live-search="true" data-actions-box="true">
  <optgroup label="filter1">
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
    <option>option4</option>
  </optgroup>
  <optgroup label="filter2">
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
    <option>option4</option>
  </optgroup>
  <optgroup label="filter3">
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
    <option>option4</option>
  </optgroup>
</select>
<script type="text/javascript">
  $('.selectpicker').selectpicker();
</script>

这可能吗？？

【问题讨论】：

标签： jquery twitter-bootstrap bootstrap-select

【解决方案1】：

您可以添加一些 jQuery 让它自动打开，并在单击文档中的任何位置时重新打开（导致它通常失去焦点并关闭）..

//auto open
$('[data-id=mySel]').trigger('click');

//stay open
$(document).on("click", function () {
   $('[data-id=mySel]').trigger('click');
});

演示：http://www.bootply.com/77umTeRI6n

【讨论】：

为什么不直接监听focusout 事件呢？为什么在任何点击时这样做？

【解决方案2】：

ZimSystem 提供的解决方案效果很好，直到您需要同时打开多个，然后才失败。以下修改有效。

在 JavaScript 中：

//initial open
$('[data-id=mySel]').trigger('click');

在 CSS 中：

.dropdown-menu {
    position: static;
    display: block !important;
    min-height: inherit !important;
    max-height: inherit !important;
}

【讨论】：