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

Question

我正在使用 Bootstrap Selectbox，它也有实时搜索功能...

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

请帮帮我...

Scenario with 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

Answer 1

正在为 bootstrap-select

使用 yii2 寻找相同的解决方案

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

所以请下载新版本并使用它。

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

Answer 2

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

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

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

参考：Selectpicker example to disable

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

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

参考：Selectpicker Core options

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

Bootstrap Select - Hide optgroup and border if does not have any searchable content inside

twitter-bootstrap

bootstrap-select

FIDDLE