Movendo itens entre list boxs
Hoje em dia, este é um recurso muito usado em formulários em geral. Permite que sejam selecionados vários itens para um relatório, por exemplo. Normalmente se tem um listbox com os Ãtens disponÃveis, e outro, inicialmente vazio, ficam os itens selecionados na primeira list.
Um bom exemplo seria em um cadastro de vendedor, o usuário deve selecionar as cidades que aquele vendedor atua. Numa list, aparece todas as cidades cadastradas. Na outra, só as seleiconadas para aquele vendedor.
Em primeiro lugar, teremos 2 lists: listOrigem e a listDestino.
<select name="listOrigem" id="listOrigem" MULTIPLE size="10"> <option value="1">Porto Alegre</option> <option value="2">São Paulo</option> <option value="3">Rio de Janeiro</option> <option value="4">Natal</option> <option value="5">Fortaleza</option> </select> <select name="listDestino" id="listDestino" MULTIPLE size="10"> </select>
e quatro simples funções, facilmente adaptáveis para o uso em outras situações:
//1. Para passar todos os Ãtens da list de origem para a de destino:
function allLeft2Right() {
var listOri = document.getElementById("listOrigem")
var listDest = document.getElementById("listDestino");
for(var i = 0; i < listOri.length; i++) {
var opcao = listOri.options[i];
var novaOpcao = new Option(opcao.text, listDest.length);
novaOpcao.value = opcao.value;
listOri.remove(i);
try {
listDest.add(novaOpcao,null);
} catch (e) {
listDest.add(novaOpcao);
}
i--;
}
}
//2. função para passar todos os Ãtens do destino para a origem:
function allRight2Left() {
var listOri = document.getElementById("listOrigem")
var listDest = document.getElementById("listDestino");
for(var i = 0; i < listDest.length; i++) {
var opcao = listDest.options[i];
var novaOpcao = new Option(opcao.text, listOri.length);
novaOpcao.value = opcao.value;
listDest.remove(i);
try {
listOri.add(novaOpcao,null);
} catch (e) {
listOri.add(novaOpcao);
}
i--;
}
}
//3. Função para apenas os Ãtens selecionados da origem para o destino:
function left2Right() {
var listOri = document.getElementById("listOrigem")
var listDest = document.getElementById("listDestino");
for(var i = 0; i < listOri.length; i++) {
var opcao = listOri.options[i];
if(opcao.selected) {
var novaOpcao = new Option(opcao.text, listDest.length);
novaOpcao.value = opcao.value;
listOri.remove(i);
try {
listDest.add(novaOpcao,null); //Firefox
} catch(e) {
listDest.add(novaOpcao); //IE
}
i--;
}
}
}
//4. e por último, para passar os Ãtens marcados do destino para a origem
function right2Left() {
var listOri = document.getElementById("listOrigem")
var listDest = document.getElementById("listDestino");
for(var i = 0; i < listDest.length; i++) {
var opcao = listDest.options[i];
if(opcao.selected) {
var novaOpcao = new Option(opcao.text, listOri.length);
novaOpcao.value = opcao.value;
listDest.remove(i);
try {
listOri.add(novaOpcao,null);
} catch (e) {
listOri.add(novaOpcao);
}
i--;
}
}
}
Exemplo funcionando:
|
|
Agora é só vc adaptar. Se preferir que no OnDblClick no combo de origem passar para o destino, é só colocar no OnDblClick do listOrigem a chamada ao left2Right. Poderia criar dois botões também para passar todos os Ãtens de um campo para o outro.
Bom, espero ter ajudado. Muitas vezes já procurei um artigo como esse, com exemplos na WEB, porém não encontrei. Então fica aqui minha contribuição.

Maio 22nd, 2007 at 16:02
Amigo, uma dúvida, tbm fiz um código semelhante a este, porém, na hora que passo um valor para outro campo, gostaria que ele aparecesse selecionado, ou então, quando ele perder o foco, todos os campo que adicionei para o outro ficassem selecionados, se puder dar uma dica agradeço, vlw!
Julho 31st, 2007 at 11:03
Otimo tutorial amigo..
parabens!!
Julho 31st, 2007 at 13:03
Blz, Mto obrigado. Qq dúvida, é só contatar…
T+
Novembro 28th, 2007 at 15:30
Ótimo post, era o que eu precisava, foi de grande ajuda.
[]’s
Novembro 28th, 2007 at 15:54
Blz. Qualquer dúvida, só perguntar..
Flw
Dezembro 5th, 2007 at 13:02
Excelente tutorial, Rafael… Valeu mesmo, salvou o meu Natal!! :)
Forte abraço!!!
Dezembro 22nd, 2007 at 23:16
Muito bom, estava tendo um problema no firefox com outro script e esse funcionou! :-)
Um abraço!
Dezembro 23rd, 2007 at 10:28
Blz.. Qq dúvida é só postar aqui OK!!..
Valeu. Flw
Dezembro 27th, 2007 at 14:18
Amigo, uma dúvida, tbm fiz um código semelhante a este, porém, na hora que passo um valor para outro campo, gostaria que ele aparecesse selecionado, ou então, quando ele perder o foco, todos os campo que adicionei para o outro ficassem selecionados, se puder dar uma dica agradeço, vlw
Dezembro 27th, 2007 at 14:24
Kra, na hora de monstar os Option, pode setar um atributo selected = true. Ali no exemplo, faria novaOpcao.selected = true; e o evento de perder foco de um objeto seria o evento onBlur do Javascript, mas se tá flndo de um Ãtem perder o foco, teria que fazer no evento onClick e depois testar se tá selecionado ou não..
Flw
Dezembro 27th, 2007 at 14:28
Obrigado, tentei colocar o novaOpcao.selected = true; antes de vc comentar, mas não funcionou….
Dezembro 27th, 2007 at 15:42
Kra, nao faz como lhe falei. Seta o selected após já ter adicionado a option ao objeto select. Ae faça: objSelect.options[x].selected = true
Enquanto a option nao está associada a um select, ele nao tem essa propriedade. Tenta ae e ve se funciona..
Valeu
Dezembro 27th, 2007 at 16:14
Valeu amigão! Funcionou!
Janeiro 15th, 2008 at 17:03
teria alguma forma de ir clicando no campo multiple e ja ir selecionando se segurar o control?
Abril 1st, 2008 at 00:40
Hi
Good site
came on this wonderful site
Very all is simple and with taste.