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

如何使用此插件使用子组(嵌套选项组)？

如果我使用嵌套,则不会显示第一个选项组.只有第二个(子)optgroup及其选项.

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

Answer 1

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

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

话虽这么说，在这种情况下，您在没有第 3 方插件的情况下看到的行为与元素的准则相矛盾。该<optgroup>元素不应该嵌套