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.
outubro 7th, 2008 at 08:38
Como eu faço pra recuperar os dados do segundo select ? Usando $_POST eu não estou conseguindo
outubro 7th, 2008 at 09:42
no campo NAME do seu select, coloque um nome_var[] (abre e fecha colchetes). Desse maneira, no $_POST vc vai ter uma variável chamada nome_var que será um array, e só conterá os values dos items selecionados.
Att
outubro 7th, 2008 at 11:38
não consegui de jeito nenhum. O select destino tá assim:
E aà pra testar eu to pondo um echo no $_POST['nome_var'] na página que recebe os dados do form mas não tá dando certo. É assim mesmo que eu recebo os dados ?
outubro 7th, 2008 at 12:08
Kra, tenta fazer o seguinte…
Dá um $_REQUEST['nome_var']
Teu form pode estar no GET, o REQUEST não importa, se tiver no GET ou no POST, o REQUEST pega…
em resumo, substitui o $_POST['nome_var'] por $_REQUEST['nome_var']
flw
outubro 7th, 2008 at 14:52
Eu descobri o problema. Eu tenho que selecionar as opções pro $_POST conseguir pegar. Aà eu to tentando fazer aqui em javascript quando o cara clicar em submit, ele selecionar o select todo.
outubro 7th, 2008 at 15:24
É, como te falei, vai estar na variável apenas os items selecionados.
p/ selecionar todo o select, use o atributo selected = true em cada um das options.
flw
abril 3rd, 2009 at 13:57
cara muito bom tutorial,
Só gostaria de saber como adptar ele para que add itens no destino e não apage o da origem.
se eu clicar 2 vezes Em Porto Alegre ele aparece 2 Porto Alegre no destino e não Apaga da Origem.
Teria como?