Agrupamento em um select com HTML 5

Gunnar CorreaGunnar Correa06/07/2015 às 11:41:08 - 12.865 acessos

Utilizando uma nova estrutura do HTML 5, podemos agrupar itens dentro de um input select.


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.

Agrupamento em um Select com HTML 5

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

 


Referências


optgroup select value option html 5 páginas web desenvolvimento formatação tag tutorial artigo aula

Compartilhe nas redes sociais



Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web, Especialista em Tecnologias na Educação e Pós-graduando em Segurança da Informação. Começou seus estudos na área de programação quando era criança, e atualmente, está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.


Fórum

Ficou com alguma dúvida? utilize nosso fórum de perguntas e respostas, lá nossa comunidade poderá te ajudar.

https://forum.satellasoft.com