GUJS

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.

This entry was posted on segunda-feira, abril 9th, 2007 at 23:40 and is filed under Cross-browser, DOM, Tutoriais Básicos. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

22 Comentários para “Movendo itens entre list boxs”

Felipe Says:
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!
Marcos Says:
julho 31st, 2007 at 11:03
Otimo tutorial amigo..
parabens!!
Rafael Quines Says:
julho 31st, 2007 at 13:03
Blz, Mto obrigado. Qq dúvida, é só contatar…

T+
Joe Says:
novembro 28th, 2007 at 15:30
Ótimo post, era o que eu precisava, foi de grande ajuda.
[]’s
Rafael Quines Says:
novembro 28th, 2007 at 15:54
Blz. Qualquer dúvida, só perguntar..

Flw
Fernanda Says:
dezembro 5th, 2007 at 13:02
Excelente tutorial, Rafael… Valeu mesmo, salvou o meu Natal!! :)
Forte abraço!!!
Pedro Paulo Says:
dezembro 22nd, 2007 at 23:16
Muito bom, estava tendo um problema no firefox com outro script e esse funcionou! :-)
Um abraço!
Rafael Quines Says:
dezembro 23rd, 2007 at 10:28
Blz.. Qq dúvida é só postar aqui OK!!..

Valeu. Flw
Alan Says:
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
Rafael Quines Says:
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
Alan Says:
dezembro 27th, 2007 at 14:28
Obrigado, tentei colocar o novaOpcao.selected = true; antes de vc comentar, mas não funcionou….
Rafael Quines Says:
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
Alan Says:
dezembro 27th, 2007 at 16:14
Valeu amigão! Funcionou!
Marco AUrélio Says:
janeiro 15th, 2008 at 17:03
teria alguma forma de ir clicando no campo multiple e ja ir selecionando se segurar o control?
Ineseeneors Says:
abril 1st, 2008 at 00:40
Hi
Good site
came on this wonderful site
Very all is simple and with taste.
Michael Says:
outubro 7th, 2008 at 08:38
Como eu faço pra recuperar os dados do segundo select ? Usando $_POST eu não estou conseguindo
Rafael Quines Says:
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
Michael Says:
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 ?
Rafael Quines Says:
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
Michael Says:
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.
Rafael Quines Says:
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
Juliano Says:
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?

Movendo itens entre list boxs

22 Comentários para “Movendo itens entre list boxs”

Comentários

Fórum do Gujs!

Arquivo

Categorias

Parceiros