Quasar: [QSelect] Group options inside select element with optgroup

[matthiasmoier]

In basic HTML <select> elements, options can be grouped using the HTML <optgroup> element. I think this would be a great addition to Quasar as with the current QSelect component, it’s only possible to have 1 level of options and thus it’s not possible to structure the options.

Having grouped options helps users to find their options faster and makes using larger <select> elements easier.

Describe the solution you'd like
I’d like to have the possibility to group options in optgroups so that options could be easily organized and structured inside a select element. (E.g. categories/subcategories, organizing a country list based on continents, etc.)

Also, it should be possible to use the same attributes that the HTML<optgroup> element provides:

• disabled
  If this Boolean attribute is set, none of the items in this option group is selectable. Often browsers grey out such control and it won't receive any browsing events, like mouse clicks or focus-related ones.
• label
  The name of the group of options, which the browser can use when labeling the options in the user interface. This attribute is mandatory if this element is used.

Optgroups could be handled as follows:

export default {
  data () {
    return {
      model: null,
      options: [
        'Some', 'Options', 'Outside', 'Of', 'Any', 'Group',
        {
            label: "Group 1",
            options: {
                'Option 1.1'
            }
        },
        {
            label: "Group 2",
            options: {
                'Option 2.1', 'Option 2.2'
            }
        },
        {
            label: "Group 3",
            disabled: true,
            options: {
                'Option 3.1', 'Option 3.2', 'Option 3.3'
            }
        },
        'Some', 'More', 'Options'
      ]
    }
  }
}

Additional context
More info and example of basic HTML <optgroup> element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup

[pjar]

Any update on this one?

[hawkeye64]

@pjar You can try something like this: https://codepen.io/Hawkeye64/pen/xxbXajq

[x-ji]

@hawkeye64 Thanks for sharing this sample solution

[piperone]

Since <optgroup> is a widely used HTML element and a convenient way of grouping related select-values together, support for nested structures in q-select's options-prop would be really nice. I was a little surprised to see that this wasn't already a feature, but I guess even the best frameworks have room for improvement :-)

[alexb007]

Looking for this feature. Is anyone already did this?