Antes de iniciar para quem não sabe o que é um listbox e como usa-lo no html:

listbox em HTML pode ser feito usando a tag <select>, definindo o atributo size

Exemplo:

<select name="teste" size="10"> </select>

O exemplo acima abrira uma lista mostrando até 10 itens, mas não limitando o select a isso, essa é apenas a limitação da área visível.
No exemplo que deixo no final do artigo verão melhor como funciona.

Onde posso aplicar isso?
Pode ser usado em qualquer lugar onde você usaria checkbox, ou seja, onde precisa de múltiplas escolhas.
Eu considero o checkbox mais vantajoso e acessível, uma vez que usar o listbox da forma que mostrarei depende de JS.
Porém algumas vezes por imposição de outras pessoas precisamos trabalhar com isso e pra não entrar no campo da hipocrisia vou deixar minha ajudinha por aqui também Mas deixo claro, tendo opções, usem checkbox!

O exemplo vocês podem ja ir dando uma olhada aqui:

FS listBox 1.0.0

Ali também disponibilizo o código para download
Comentando um pouco mais sobre o exemplo. Ele possui 2 funcoes em javascript; uma para mover os elementos de um listbox/select para o outro, e outra para ordenar o select.

A função para ordenar pode ser usado em qualquer campo select tranquilamente, mesmo que não seja aberto.

Para ordernar basta usar:

	ordenarLista("nome_do_select");

Onde o “nome_do_select” tem que ser o caminho completo do objeto do formulário, um exemplo:

	var nome_do_select = document.form.nome_select;
	ordenarLista(nome_do_select);

Para mover/controlar elementos de uma lista para a outra basta usar o seguinte:

	move("nome_form","nome_do_select1","nome_do_select2");

Neste caso basta inserir o nome(name) de cada campo, entre aspas e o script faz o resto.
O select1 não importa se esta a direita a esquerda, abaixo ou acima, seja sempre o que esta cedendo um elemento, e o select2 é o receptor.
Logo coloquem no lugar do “nome_do_select1″ sempre que perde elementos e no “nome_do_select2″ quem recebe
Bom é isso por enquanto, duvidas, criticas como sempre, bem vindas, espero nos próximos dias começar a responder alguns emails que me enviaram, antes tarde do que nunca certo ;D

Categorias: Javascript