Logo SatellaSoft



Agrupamento em um select com HTML 5

Veja como é possível organizar tópicos dentro de um Select por grupos com o HTML 5.


Ícone homem Gunnar Correa
Ícone data de publicação 06/07/2015
Ícone quantidade de visualização 2,512
Ícone bandeira do Brasil Português

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, http://satellasoft.com/?materia=criando-elementos-com-javascript.

Veja o resultado final deste artigo em, http://satellasoft.com/exemplos/optgroup.html.

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

Documentação W3C: http://www.w3schools.com/tags/tag_optgroup.asp.

 




Sobre o autor


Gunnar Correa

Nome: Gunnar Correa

Site: http://www.gunnarcorrea.com


Autodidata, graduado em Desenvolvimento Web e especialista em Tecnologias na Educação em uma universidade no interior de São Paulo. Comecei meus estudos na área de programação quando ainda era criança, e atualmente estou estudando desenvolvimento de jogos.

Sou o CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.


Comentários



É necessário estar autenticado para comentar, clique aqui para se registrar ou aqui para acessar a sua conta!