Agrupamento em um select com HTML 5

Muitas vezes necessitamos exibir informações de forma agrupada em uma lista, em alguns casos são utilizados Plugins como jQuery, Metro, Bootstrap dentre outros, tudo isto apenas para ter um agrupamento.

Imagine que temos os seguintes itens em um select: Banana, Maça, Peixe, Frango, Uva e Bife, como são possível notar, esta tudo bagunçado, mas sabemos que o select se trata de alimentos, em um select convencional ficaria da seguinte forma como mostrado abaixo.

Código 01:

<select id="slAlimentos">
	<option value="" selected="selected">Selecione</option>
	<option value="1">Maça</option>
	<option value="1">Peixe</option>
	<option value="3">Frango</option>
	<option value="4">Uva</option>
	<option value="5">Bife</option>
</select>

Com o HTML é possível agrupar itens dentro de um <select> através da Sub Tag <optgroup>, ela não é uma Tag órfão e possui um atributo chamado label, que adiciona um rótulo, de forma simplificada, adiciona um título antes do tópico.

Confira abaixo um modelo do mesmo select, porém com agrupamento pela tag <optgroup>, além do atributo label, é possível usar o disabled, que desabilita o grupo.

Código 02:

<select id="slAlimentos">
	<option value="" selected="selected">Selecione</option>
	<optgroup label="Frutas">
		<option value="6">Banana</option>
		<option value="1">Maça</option>
		<option value="4">Uva</option>
	</optgroup>
	<optgroup label="Carnes">
		<option value="5">Bife</option>
		<option value="3">Frango</option>
		<option value="1">Peixe</option>
	</optgroup>
</select>

Caso as informações sejam carregadas do banco de dados, será necessário criar um select por agrupamento, mas antes disso verificar se a linha atual possui uma subcategoria, se possuir criar um elemento do tipo optgroup e atribuir o valor a label.

Confira um artigo de como criar elementos com Javascript: https://satellasoft.com/artigo/javascript/criando-elementos-com-javascript/amp.

Em caso de dúvidas deixe nos comentários, até a próxima!