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/

Detour

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. – Stilu

@Stilu How can I use subgroups (nested optiongroups) using this plugin? – Detour

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 for more info. – Stilu

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) which should be easier to use when you're already using JS to build the select – Stilu

Answer 1

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

Ahmednagar