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>

如何使用此plugin？

来使用子组（嵌套选项组）

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

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

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

也就是说，在这种情况下，您看到的没有第三方插件的行为与元素的准则相矛盾。 <optgroup>元素是not supposed to be nested

Bootstrap-Select中的子选项组

1 个答案: