Bootstrap 多选 - 组标签的过滤问题

Posted 2023-03-05

【中文标题】Bootstrap 多选 - 组标签的过滤问题

【英文标题】：Bootstrap multi-select - Filtering issue with Group Labels

【发布时间】：2015-11-13 16:19:49

【问题描述】：

我在 Rails Web 应用程序中使用Bootstrap (2.3.2) 多选。我在多选中使用的功能如下所示：

<script type="text/javascript">
  $(function()  
    $('#coder_prod_select_client').multiselect(
      includeSelectAllOption: true,
      enableCaseInsensitiveFiltering: true,
      numberDisplayed: 0,
      nonSelectedText: 'Select Facility',
      maxHeight: 450
    );
  );
</script>

以下是 html 代码：

<div id="coder_prod_facilities_for_select">
    <select name="facility[]" multiple="multiple" id="coder_prod_select_facility" style="display: none;">
        <option value="multiselect-all"> Select all</option>
        <optgroup label="Group 1">
            <option value="114">Ancillary</option>
            <option value="115">Inpatient</option>
            <option value="117">Emergency</option>
        </optgroup>
        <optgroup label="Group 2">
            <option value="80">Inpatient</option>
            <option value="81">SS Surgery</option>
            <option value="90">Emergency</option>
        </optgroup>
        <optgroup label="Group 3">
            <option value="73">Inpatient</option>
            <option value="75">Observation</option>
            <option value="76">SS Surgery</option>
            <option value="77">Ancillary</option>
        </optgroup>
    </select>

    <div class="btn-group">
        <button data-toggle="dropdown" class="multiselect dropdown-toggle btn btn-default" type="button" title="Select Facility">
            Select Facility
            <b class="caret"></b>
        </button>
        <ul class="multiselect-container dropdown-menu" style="max-height: 450px; overflow-y: auto; overflow-x: hidden;">
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="glyphicon glyphicon-search"></i>
                </span>
                <input type="text" class="form-control multiselect-search" placeholder="Search">
            </div>
            <li>
                <a href="javascript:void(0);" class="multiselect-all">
                    <label class="checkbox"><input type="checkbox" value="multiselect-all">  Select all</label>
                </a>
            </li>
            <li style="display: list-item;">
                <label class="multiselect-group">Group 1</label>
            </li>
            <li style="display: list-item;">
                <a href="javascript:void(0);">
                    <label class="checkbox"><input type="checkbox" value="114"> Ancillary</label>
                </a>
            </li>
            <li style="display: list-item;">
                <a href="javascript:void(0);">
                    <label class="checkbox"><input type="checkbox" value="115"> Inpatient</label>
                </a>
            </li>
            <li style="display: list-item;">
                <a href="javascript:void(0);">
                    <label class="checkbox"><input type="checkbox" value="117"> Emergency</label>
                </a>
            </li>
            <li style="display: list-item;">
                <label class="multiselect-group">Group 2</label>
            </li>
            <li style="display: list-item;">
                <a href="javascript:void(0);">
                    <label class="checkbox"><input type="checkbox" value="80"> Inpatient</label>
                </a>
            </li>
            <li style="display: list-item;">
                <a href="javascript:void(0);">
                    <label class="checkbox"><input type="checkbox" value="81"> SS Surgery</label>
                </a>
            </li>
            <li style="display: list-item;">
                <a href="javascript:void(0);">
                    <label class="checkbox"><input type="checkbox" value="90"> Emergency</label>
                </a>
            </li>
            <li style="display: list-item;">
                <label class="multiselect-group">Group 3</label>
            </li>
            <li style="display: list-item;">
                <a href="javascript:void(0);">
                    <label class="checkbox">
                        <input type="checkbox" value="73"> Inpatient</label>
                </a>
            </li>
            <li style="display: list-item;">
                <a href="javascript:void(0);">
                    <label class="checkbox"><input type="checkbox" value="75"> Observation</label>
                </a>
            </li>
            <li style="display: list-item;">
                <a href="javascript:void(0);">
                    <label class="checkbox"><input type="checkbox" value="76"> SS Surgery</label>
                </a>
            </li>
            <li style="display: list-item;">
                <a href="javascript:void(0);">
                    <label class="checkbox"><input type="checkbox" value="77"> Ancillary</label>
                </a>
            </li>
        </ul>
    </div>
</div>

下面你可以看到默认的视图/HTML。

您可以看到每个组下都有相似的元素。例如，当我使用值“inpatient”进行过滤时，它会显示如下附件所示的结果。

但是，每个过滤的“住院”值都属于单独的组，并且所有值都应该显示在其组名的顶部！！但事实并非如此。

谁能帮我找出并解决问题？

【问题讨论】：

您是否可以尝试不同的多选，例如select2.github.io/select2 ？

【参考方案1】：

你可能想再检查一下js，不应该是$("#coder_prod_select_facility").multiselect(...)吗？

【讨论】：

不，只有不匹配的id，应该是“coder_prod_select_facility”而不是“coder_prod_select_client”