10

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

4

1 回答 1

1

如果您使用 Bootstrap Select 的唯一原因是拥有一个“更漂亮”的选择框，您可以考虑使用custom-selectBootstrap 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">

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

于 2020-06-22T15:54:13.500 回答