Bootstrap-Select 中的子选项组答案

【问题标题】：Sub Option Groups in Bootstrap-SelectBootstrap-Select 中的子选项组
【发布时间】：2013-10-12 18:42:22
【问题描述】：

下面的select 代码可以不使用使用 Bootstrap-Select 插件，但在使用时不行：

<div class="container">
    <select>
        <optgroup label="Group 1">
            <optgroup label="Sub Group 1">
                <option>Item 1</option>
                <option>Item 2</option>
                <option>Item 3</option>
            </optgroup>
            <option>Item 2</option>
            <option>Item 3</option>
        </optgroup>
        <optgroup label="Group 2">
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
        </optgroup>
    </select>
</diV>

如何通过 plugin 使用子组（嵌套选项组）？

如果我使用嵌套，则不会显示第一个选项组。只有第二个（子）optgroup 及其选项。

这是插件网站： http://silviomoreto.github.io/bootstrap-select/

【问题讨论】：

使用 Bootstrap-Select 插件时无法实现是什么意思？您链接的页面上的第二个示例显示它与选项组一起使用。需要更多信息，请。
@Joseph 如何通过此插件使用子组（嵌套选项组）？
对不起，我看错了。在这种情况下，如果 bootstrap-select 不支持这一点，我不会感到惊讶，因为它不是规范的一部分。请参阅this answer 了解更多信息。
或许你可以联系一下bootstrap-select的作者，看看他或她能不能实现这样的功能？显然，当您已经在使用 JS 构建 select 时，应该有一些变通方法（参见 this）应该更容易使用

标签： css twitter-bootstrap optgroup

【解决方案1】：

如果您使用 Bootstrap Select 的唯一原因是拥有一个“更漂亮”的选择框，您可以考虑使用 Bootstrap 4.x 中的 custom-select 类。

<select class="custom-select">
  <optgroup label="Group 1">
    <optgroup label="Sub Group 1">
      <option>Item 1</option>
      <option>Item 2</option>
      <option>Item 3</option>
    </optgroup>
  
    <option>Item 2</option>
    <option>Item 3</option>
  </optgroup>

  <optgroup label="Group 2">
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Item 3</option>
  </optgroup>
</select>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

话虽如此，在这种情况下，您在没有 3rd 方插件的情况下看到的行为与元素的准则相矛盾。 <optgroup> 元素是 not supposed to be nested

【讨论】：