Select HTML: Carregando dados dinamicamente

mysql[1]

Carregar dados para dentro de um select HTML é uma tarefa simples e que pode ser executada de diversas maneiras diferentes. Para começar precisamos compreender a natureza do funcionamento das caixas de seleção em HTML para então dividir o problema em partes: 1º conhecer o que precisa ser carregado; 2º definir uma estratégia de implementação; e 3º implementar.

Select HTML

As caixas de seleção são controles de formulário que permitem a entrada de dados pelo usuário. A marcação HTML que as cria é  <select>. Cada caixa possui uma quantidade de opções  <option> que são exibidas para seleção. Tanto as caixas quanto as opções possuem diversos atributos que alteram seu comportamento e design, mas para esse tutorial vamos atentar para dois apenas. A caixa de seleção precisa de um nome para que, no envio do formulário, você possa identificar qual opção foi marcada pelo usuário, deliberado pelo atributo name; e cada opção levará o atributo  value contendo o valor a ser passado através do formulário. Caso o valor não tenha sido explicitado, o conteúdo da tag  <option> é que será passado para frente. Isto existe para os casos em que você quer exibir uma coisa, mas enviar outra no lugar, como quando você tem uma lista de nomes e ao selecionar um deles a variável é preenchida com o CPF por ser essa chave que o sistema espera receber.

Exemplo funcionando: 

1º Passo – Conhecer o que precisa ser carregado

Para este exemplo vamos tomar uma tabela de países contendo código e nome como na tabela abaixo:

idnome
1Argentina
2Brasil
3Peru
4Venezuela

2º Passo – Definir uma estratégia de implementação

Nessa etapa podemos utilizar qualquer método disponível para prototipar o que vamos codificar no futuro. Primeiro vamos elaborar uma raciocínio e então desenhar utilizando um pequeno diagrama. Num primeiro momento precisaremos configurar uma conexão com o banco de dados (nesse exemplo usaremos MySQL), seja por classe própria ou PDO diretamente. Depois de estabelecer e checar a conexão o banco de dados é que faremos a consulta na base por todos os países. O retorno à essa função pode ser feita por associação a um vetor ou objetos.  Feita a coleta, passaremos a imprimir na tela a início da caixa de seleção onde os dados serão exibidos (que vai desde o começo da caixa até depois da primeira opção vazia) e então iterar sobre os itens da coleção. Dependendo da forma como será realizada a obtenção dos dados, a impressão da parte inicial da caixa deve ser realizada antes da associação. Terminada a iteração, imprimiremos a parte final (o fechamento da marcação da caixa) e o algoritmo será finalizado. Em termos de diagrama de atividades temos:

Diagrama de Atividades - Select HTML

Diagrama de Atividades

3º Passo – Implementar

Hora de colocar a mão na massa. O código a seguir é bem simples, então basta pegar o conceito e adequar ao seu projeto:

 

Espero que tenha compreendido como funciona a caixa de seleção e como preenche-la com dados dinamicamente do banco de dados. Qualquer dúvida estou à disposição, basta entrar em contato!

Deixe seu comentário