[QSelect] Group options inside select element with optgroup

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

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

[hawkeye64]

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