Agrupamento em um select com HTML 5

Gunnar CorreaGunnar Correa06/07/2015 às 11:41:08 - 10.253 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


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). 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.



Site atualizado

Olá, nosso site recebeu uma nova atualização e por conta disso, alguns artigos ainda estão sendo atualizados. Dependendo do conteúdo que você procura, poderá encontrar imagens e trechos de códigos mal formatados.

Estamos trabalhando para normalizar todos os conteúdos, muito em breve, esse problema não mais existirá.


Comentários