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!