Bootstrap Select - 如果里面没有任何可搜索的内容，则隐藏 optgroup 和边框答案

【问题标题】：Bootstrap Select - Hide optgroup and border if does not have any searchable content insideBootstrap Select - 如果里面没有任何可搜索的内容，则隐藏 optgroup 和边框
【发布时间】：2018-10-31 22:46:23
【问题描述】：

我正在使用具有实时搜索功能的 Bootstrap 选择框...

搜索时，如果标签中没有找到结果，相关的也应该隐藏。

请帮帮我...

HTML 场景

我有一个如下所示的选择框：

<select class="selectpicker" data-live-search="true">
    <optgroup label="Option Group 1">
      <option selected>a</option>
      <option>b</option>
      <option>c</option>
    </optgroup>
    <optgroup label="Option Group 2">
      <option>d</option>
      <option>e</option>
      <option>f</option>
    </optgroup>
  </select>

当我尝试搜索“e”时，它应该隐藏第一个选项组。

jQuery

$(document).ready(function(){
     if ($(".selectpicker li").hasClass("hide")) {
        $(this).prev(".dropdown-header").hide();
     }     
 });

FIDDLE

【问题讨论】：

标签： twitter-bootstrap bootstrap-select

【解决方案1】：

我正在使用 bootstrap-select.js 1.11.2，并且我已经完成了以下操作来隐藏选项和 optgroup。

在 JQuery 中，您需要禁用 optgroup 下的选项。

$("optgroup[label='optgroup_label']").children().prop('disabled', true);

参考：Selectpicker example to disable

在HTML中，需要在select标签中添加data-hide-disabled:"true"：

<select class="selectpicker" multiple title="..." data-size="7" data-live-search="true" data-selected-text-format="count" data-hide-disabled="true">

参考：Selectpicker Core options

【讨论】：

您的参考链接已损坏。
链接现在可以了。

【解决方案2】：

寻找使用 yii2 进行引导选择的相同解决方案

好消息，新版本的 bootstrap-select.js 1.11.2 解决了隐藏空 optgroup 的问题。

下载新版本并使用它，尽情享受吧。

https://silviomoreto.github.io/bootstrap-select/

【讨论】：