Trocando itens de ListBoxes via JavaScript


Olá caro leitor! Neste tutorial você aprenderá de uma forma fácil e detalhada a trocar ítens entre ListBoxes através de um simples código JavaScript, uma das mais usadas ferramentas para programação Web/Client. Vamos então ver alguns conceitos básicos,para alguém que nunca utilizou essas ferramentas não ficar “boiando” no assunto🙂 ….


I – Conceitos

1. ListBox
Um ListBox – ou caixa de listagem – nada mais é que a tag SELECT da linguagem HTML. Mas espera aí, a tag SELECT não é a que cria o ComboBox? Sim, em termos de código esses objetos são idênticos – não levando em conta o aspecto visual – com apenas um único diferencial: a propriedade size. Se essa propriedade tiver um valor maior que 1 então nossa tag SELECT será um ListBox, mas se ela tiver um valor igual a 1 ou for omitida teremos um ComboBox. A ListBox será o recipiente que nos permitirá manipular as informações que desejamos, as quais estarão contidas nas opções.

2. Opções
As opções serão as estruturas que armazenarão as informações que estaram contidas dentro do ListBox. Elas são criadas através da tag OPTION que será exemplificada mais a frente. Elas serão o alvo deste tutorial pois, nelas que estarão contidas as informações que serão aproveitadas.

3. JavaScript
A JavaScript é uma linguagem de scripts utilizada no cliente para alterar propriedades da página e de seus objetos e que cria até uma certa dinamicidade. Ela será a nossa ferramenta para manipular essas informações.
Bom, agora depois de todo esse blá blá blá vamos ao que realmente interessa:

II – Código
Para facilitar a compreensão, vou colocar como exemplo uma escola onde se deseja cadastrar os alunos em suas respectivas salas. Cada página desta, representará uma sala e teremos todos os alunos da escola em uma List e outra List vazia onde serão colocados os alunos que pertencerão a essa sala.
Vou colocar aqui o código completo para que você não tenha que ficar “caçando” linha a linha no tutorial caso queira utilizá-lo. As explicações vêm a seguir:

1. Este é o código HTML contendo as Lists e dois botões para podermos fazer as trocas:


<HTML>
<HEAD>
<TITLE>Exemplo de ListBox – Escola São João do JavaScript </TITLE>
</HEAD>
<BODY>
<FORM name=”form” action=”página_destino.htm” method=”post”>
<TABLE width=”80%” border=0>
<TR>
<TD width=35%><P align=”right”>Alunos<BR>
<SELECT name=”List1″ size=”5″ multiple style=”width: 100pt”>
<OPTION value=”Joãozinho”>Joãozinho</OPTION>
<OPTION value=”Pedrinho”>Pedrinho</OPTION>
<OPTION value=”Juquinha”>Juquinha</OPTION>
<OPTION value=”Mariazinha”>Mariazinha</OPTION>
</SELECT></P>
</TD>
<TD width=10%><P align=”center”>
<INPUT type=”button” name=”insere”value=”>>” OnClick=”TrocaList(document.form.List1,document.form.List2)”><BR>
<INPUT type=”button” name=”deleta” value=”<<” OnClick=”TrocaList(document.form.List2,document.form.List1)”><BR>
</TD></P>
<TD width=35%><P align=”left”>Classe<BR>
<SELECT name=”List2″ size =”5″ multiple style=”width: 100pt”></SELECT></P>
</TD>
</TR>
</TABLE><BR>

</FORM>

</BODY>
</HTML>

2. Esse é o código JavaScript que fará a transferência:

<SCRIPT language=JavaScript>
function TrocaList(ListOrigem,ListDestino)
{
var i;
for (i = 0; i < ListOrigem.options.length ; i++)
{
if (ListOrigem.options[i].selected == true)
{
var Op = document.createElement(“OPTION”);
Op.text = ListOrigem.options[i].text;
Op.value = ListOrigem.options[i].value;
ListDestino.options.add(Op);
ListOrigem.options.remove(i);
i–;
}
}
}
</SCRIPT>

Simples não é? Não? Então vamos ver passo a passo:

III – Passo a Passo
Nessa parte tentarei explicar do modo mais detalhado possível, sendo que é provável que muita coisa que estiver aqui você pode já estar careca de saber, mas pense em quem está começando a fazer páginas e tem apenas noções básicas de HTML.
Vamos começar pelo código HTML, que além de ser mais fácil de se entender é a base para compreendermos a utilidade do restante do código:

1. O imprescindível HTML

a) O Formulário
O formulário vai ser a tag onde estarão as ListBoxes e os botões que usaremos para trocar as opções entre os mesmos e também que direcionará a resposta do nosso HTML para outra página.

<FORM name=”form” action=”página_destino.htm” method=”post”>

Se você deseja passar as opções que selecionou para outra página, obrigatoriamente terá que usar um formulário para passar os parâmetros desejados para ela. Como a tabela foi usada apenas por um aspecto visual, não falaremos sobre ela.

b) A ListBox
Aí está a tão polêmica tag SELECT que neste caso está como uma ListBox e não como um ComboBox pois notem, a propriedade size possui valor 5, ou seja, este SELECT será uma ListBox com cinco linhas.

<SELECT name=”List1″ size=”5″ multiple style=”width: 100pt”></SELECT>

A propriedade multiple que está dentro da tag nos permite selecionar várias opções simultaneamente. Ela só será útil numa ListBox pois, como o size do ComboBox é 1, mesmo que colocássemos essa propriedade seria possível selecionar somente uma opção por vez.

c) As Opções
Como foi dito anteriormente, a OPTION armazena as informações que desejamos utilizar. Nela teremos dois tipos de informação: uma que será a que utilizaremos e outra que será a apresentada na página. Essa é uma das vantagens de uma ListBox – a informação apresentada não precisa ser necessariamente a que será utilizada.

<OPTION value=”Joãozinho”>Joãozinho</OPTION>

A informações que serão aproveitadas devem estar contidas na propriedade value. As aspas não são obrigatórias, a menos que a informação contenha espaços. As informações que serão apresentadas ao usuário devem estar entre as tag de abertura e a de fechamento. Estas não necessitam de aspas em qualquer hipótese, pois tudo que você escrever ali será visto na página, então se você digitar as aspas elas irão aparecer também.

Note que, nesse caso as duas informações são iguais, mas poderíamos colocar o número de matrícula na propriedade value, sendo assim o HTML mostraria o nome do aluno mas na verdade, estaria guardando o seu número de matricula.

Dica: se você deseja deixar uma opção selecionada por padrão, dentro da tag de abertura insira a palavra selected, que é uma propriedade da OPTION que indica se ela está selecionada ou não.

d) Os Botões
Os botões são objetos que usamos para acionar alguma mudança na página. Eles serão os nossos “mensageiros”, ou seja, eles que acionaram o código JS.

<INPUT type=”button” name=”insere” value=”>>” OnClick=”TrocaList(document.form.List1,document.form.List2)”>

Note que o nome será usado apenas como referência interna e a value conterá o texto que será mostrado no botão. O evento OnClick é acionado quando o botão é clicado. Ele chamará o nosso tão esperado código JS: a função TrocaList com os parâmetros document.form.List1 e document.form.List2 que serão explicados adiante.

Perceba também que no segundo botão a ordem dos parâmetros foi invertida. Quando estivermos na parte do JS falaremos o porque dessa troca.

e) o Script

<SCRIPT language=JavaScript></SCRIPT>

A tag SCRIPT indica o espaço onde se deve escrever o código do script. A propriedade language determina a linguagem de script que será utilizada – no nosso caso JavaScript.

2 – Finalmente, o JavaScript
Chegamos ao ponto crucial deste tutorial. Se você teve facilidade para entender o código acima, com certeza vai tirar de letra este aqui. Vamos lá então:

a) A Chamada da Função

Lembra do evento OnClick do botão, onde tinha a chamada da função:

TrocaList(document.form.List1,document.form.List2)

Então, começaremos por ele. TrocaList é o nome da função que iremos chamar, função esta que foi declarada dentro da tag SCRIPT desta página. O nome com o qual a função foi chamada deve ser exatamente o mesmo da que foi declarada.

document.form.List1 e document.form.List2 são os parâmetros passados à função que, neste caso, estão indicando as Lists que iremos utilizar. Como o JS não reconhece as Lists como objetos autônomos, eu tenho que especificar a quem elas pertencem a partir do que é comum a todos elementos desta página, a própria página. Como não podemos dar um nome a página como nos objetos, document será a palavra que usaremos para referir-se a ela , form é o nome do formulário e List1 e List2 são as ListBoxes que queremos manipular. Como o ponto(.) indica que o que vem após ele é uma propriedade, objeto ou método de quem vem antes, List1 e List2 são objetos que estão contidos no formulário form que por sua vez é um objeto da página HTML.

b) A Declaração da Função

function TrocaList(ListOrigem,ListDestino)

Essa é a declaração da função. A palavra function indica ao JS que iremos declarar uma função. TrocaList será o nome da nossa função, e ListOrigem e ListDestino as variáveis que armazenaram o valor dos parâmetros que enviamos quando chamamos ela lá nos botões. A primeira variável, ListOrigem, como o próprio nome sugere será a List que enviará as opções e a segunda, ListDestino, a que receberá estes. Lembra que a ordem dos parâmetros no segundo botão estava invertida?! Justamente por isso, o primeiro botão envia as informações da List com o nome dos alunos para a List da classe que está sendo montada, e o segundo faz exatamente o contrário.

Nota: Poderíamos enviar o nome das Lists diretamente para função sem utilizar parâmetros, mas neste caso teríamos que fazer uma função para cada botão e nosso código JS dobraria de tamanho.

c) As Variáveis

var i;
var Op = document.createElement(“OPTION”);

Essas serão as variáveis que iremos usar, além das que receberam os parâmetros. Declararemos a variável i como um contador apenas e a variável Op como um objeto da página através do método createElement() do objeto document, ou seja, a página.

d) Fazendo a Transferência

Na verdade, não é possivel enviar uma OPTION de uma List para outra. O que? Como não? Calma leitor,  este tutorial não foi feito a toa. Como para tudo existe uma solução o que faremos será copiar os dados da OPTION selecionada numa variável – pra isso a declaração da variável Op -, remove-la da List de origem e criar uma nova com os mesmos valores na List de destino. Vamos as linhas:

for (i = 0; i < ListOrigem.options.length ; i++)

Como na nossa tag SELECT especificamos a propriedade multiple que possibilita selecionar mais de uma OPTION ao mesmo tempo ,teremos que controlá-las dentro do nosso código. Para isso, usaremos o comando for que é uma estrutura de repetição, juntamente com o nosso contador i que controlará o índice que identifica cada opção, já que a propriedade ListOrigem.options é uma matrix que referência todas as opções da List. O primeiro parâmetro do for, i = 0 indica o valor inicial do contador, que no caso é zero.

O segundo parâmetro, i < ListOrigem.options.length, indica a condição de existência do for, ou seja, enquanto esta sentença for verdadeira o for será executado. Neste caso i deve ser menor que a quantidade de opções – options.length – que a List de origem contém. O terceiro parâmetro indica o que deve ocorrer cada vez que o for for executado, que no caso é o incremento do nosso contador – i++ é a mesma coisa que i = i + 1 – para que ele possa percorrer todas as opções da List.

Sendo assim a segunda vez que o for for executado o contador valerá 1, na terceira vez 2 e assim sucessivamente até que i alcance o valor de ListOrigem.options.length, o que determinara o fim da execução do comando. Tudo que será executado pelo for deve estar entre chaves.
Vamos agora, analisar o seu conteúdo:

if (ListOrigem.options[i].selected == true)

O comando if determina uma condição. Neste caso só será executado o que está no seu interior se a opção de índice i estiver selecionada na List.

var Op = document.createElement(“OPTION”);

Esta variável está sendo declarada aqui para que não precisemos limpar seu conteúdo toda vez que formos reutilizá-la. Então, quando o if é iniciado ela é criada com seu conteúdo vazio e quando ele é encerrado ela é apagada.

Op.text = ListOrigem.options[i].text;

Aqui atribuímos o valor do text – que representa a informação que será mostrada na página – da opção a ser copiada da List de origem para nossa variável.

Op.value = ListOrigem.options[i].value;

Da mesma forma, aqui atribuímos o valor da opção – que representa a informação que será utilizada – para a variável.

ListDestino.options.add(Op);

Aqui utilizaremos o método add() da matriz ListDestino.options, que adicionará uma nova opção com os valores da variável Op que foi passada como parâmetro. Note que dessa vez não utilizamos índice pois a opção será adicionada na matriz de opções e não em uma opção específica.

ListOrigem.options.remove(i);

E para terminar removeremos a opção, que já está armazenada na List de destino, da List de origem através de método remove() da matriz ListOrigem.options.

i–;

Agora imagine que o contador estivesse com o valor 3. Quando removermos esse item de índice 3 o JS vai passar este índice para a opção subseqüente, ou seja, a opção que tinha o índice 4 agora passa a ter índice 3. Logo, quando o for for executado novamente e incrementar a variável i, esse item será pulado criando assim um bug em nosso código. Por isso, no final de todo código ainda dentro if devemos decrementar o contador – i– é a mesma coisa que i = i -1 – , para que ele retorne a este mesmo índice e não pule esse item.

Nota: Cuidado para não colocar o decremento fora do if. Se isso acontecer você estará criando o que chamamos de loop eterno, o que poderá travar o seu navegador quando for executar a página.

IV – Observações
Pronto, você viu como é simples ? Agora para finalizar preciso passar a você algumas observações que podem ser vitais ao bom funcionamento deste código:

1. Case Sensitive
O JavaScript é uma linguagem case sensitive, ou seja, ela diferencia letras maiúsculas de minúsculas – então cuidado com elas.

2. Ponto-e-Vírgula
Esquecer um ponto-e-vírgula no JS é “caso de morte”: todas as sentenças que não utilizarem chaves devem conter um ponto-e-vírgula no final.

3. Chaves
As chaves delimitam estruturas de repetição ou de condição ou funções. Recomendo que ao abrir uma chave, imediatamente feche-a e vá digitando o código entre elas, assim não há perigo de você esquecer de fechá-las.

Espero que tenha sido proveitoso este código, que apesar de simples tem muita utilidade, principalmente para quem faz sites comerciais🙂 …

Publicado em 27 de fevereiro de 2009, em JavaScript e marcado como , . Adicione o link aos favoritos. Deixe um comentário.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: