Question

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

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

请帮帮我......

包含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

使用yii2寻找相同的解决方案，用于bootstrap-select

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

欢迎下载新版本并使用它。

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

Answer 2

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

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

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

参考：Selectpicker example to disable

在HTML中，您需要在选择标记中添加数据隐藏禁用：＆＃34; true＆＃34; ：

<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和border

FIDDLE

2 个答案: