Olá a todos. Nesse artigo quero apresentar um método de desenvolver um Dual Combo usando JavaScript. Para quem não conhece, um Dual Combo é uma ferramenta muito utilizada quando queremos selecionar/manipular alguns itens de uma lista de elementos. A ferramenta é composta por dois elementos combo (SELECT) e quatro botões de ações, podendo ter também dois botões para salvar os values em campos text ou hidden.

O arquivo DualCombo.js contém as funções JavaScript utilizadas pelo DualCombo. Segue uma breve descrição das funções:

saveList( destList, field )

Essa função salva os valores de uma lista em um campo de preferência hidden. No meu exemplo, eu enviei para um campo text para vocês visualizarem o resultado.

insertList(x,destList)

Insere um elemento em uma lista.

moveDualList( srcList, destList, moveAll )

Move elemento(s) de uma lista (srcList) a outra(destList).

O parâmetro moveAll determina se todos os elementos serão movidos ou se somente o selecionado.

removeDualList( srcList, moveAll )

Remove um ou mais elementos de uma lista.

O parâmetro moveAll determina se todos os elementos serão removidos ou se somente o elemento selecionado será removido da lista.

Botão <

Move o elemento selecionado da lista da direita para a lista da esquerda.

Botão >

Move o elemento selecionado da lista da esquerda para a lista da direita.

Botão <<

Move todos os elementos da lista da direita para a lista da esquerda.

Botão >>

Move todos os elementos da lista da esquerda para a lista da direita.

Espero que utilizem bastante e que seja um diferencial nos seus produtos.

Grato!

Confira o curso de Javascript no TISHOP!