Sub Option Groups in Bootstrap-Select

Question

The select code below is possible without using Bootstrap-Select plugin, but not when using it:

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

How can I use subgroups (nested optiongroups) using this plugin?

The first option group is not shown if I use nested. Only the second (children) optgroup and its options.

Here is the plugin website: http://silviomoreto.github.io/bootstrap-select/

What do you mean it's not possible when using Bootstrap-Select plugin? The second example on the page you linked shows it working with option groups. Need more information, please. — Joseph, Oct 12 '13 at 18:56
@Joseph How can I use subgroups (**nested optiongroups**) using this plugin? — kamieduard, Oct 12 '13 at 19:00
Sorry, I mis-read. In that case, I wouldn't be surprised if bootstrap-select didn't support this since it's not part of the spec. See [this answer](http://stackoverflow.com/a/3414427/1025963) for more info. — Joseph, Oct 12 '13 at 19:01
Perhaps you can get in touch with the author of bootstrap-select to see if he or she can implement such a feature? Apparently there are workarounds (see [this](http://stackoverflow.com/a/1037781/1025963)) which should be easier to use when you're already using JS to build the `select` — Joseph, Oct 12 '13 at 19:04

score 2 · Answer 1 · answered Jun 22 '20 at 15:54

If your only reason for using Bootstrap Select is to have a 'prettier' select box you might consider using the custom-select class that is part of 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">

That being said, in this case the behavior you are seeing without the 3rd party plugin contradicts the guidelines of the element. The <optgroup> element is not supposed to be nested

Sub Option Groups in Bootstrap-Select

1 Answers1