Bootstrap-Select 中的子选项组

Question

下面的 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>​

我该如何使用这个插件来使用子组 (嵌套的选项组)?

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

以下是该插件的网站：http://silviomoreto.github.io/bootstrap-select/

- kamieduard

---

使用Bootstrap-Select插件时，你说它不可能吗？你提供的页面上的第二个示例展示了它可以与选项组一起使用。请提供更多信息。 - Joseph

@Joseph，我该如何使用此插件的子组（嵌套选项组）？ - kamieduard

抱歉，我看错了。在这种情况下，如果bootstrap-select不支持此功能，我不会感到惊讶，因为它不是规范的一部分。有关更多信息，请参见此答案。 - Joseph

也许你可以联系bootstrap-select的作者，看看他或她是否能够实现这样一个功能？显然有一些解决方法（参见this），当你已经使用JS构建“select”时，应该更容易使用。 - Joseph

Answer 1

如果你只是因为想要一个更漂亮的下拉框而使用Bootstrap Select，那么你可以考虑使用Bootstrap 4.x中的custom-select类。请注意，保留html标签。

<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">

话虽如此，在这种情况下，您在没有第三方插件的情况下看到的行为与元素的指南相矛盾。 <optgroup> 元素不应嵌套

- Robert