GUJS

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 DOM, Cross-browser, 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.