18 February 2008 - 16:00Transferência entre selects múltiplos usando JQuery (Parte I)

Nessa primeira parte iremos mostrar como transferir itens entre dois selects usando JQuery, e o comparativo com JavaScript puro. Na segunda parte abordaremos como receber os valores deste Select Multiplo via PHP.

Primeiro, devemos incluir a biblioteca do JQuery, que você já deve ter baixado caso tenha lido o artigo anterior ( http://jquery.com/ ), no nosso caso, ele fica dentro de uma pasta chamada dll na raiz do diretório:

<script language="javascript">
type="text/javascript" src="../dll/jquery.js">
</script>

Agora devemos criar a função que fará a transferência entre os Selects:

<script language="javascript">
function transfereItem(idList, idList2){
	$("#"+idList2).append($("#"+idList+" option[@selected]"));
}
</script>

A função a cima recebe o id das duas listas de seleção e adiciona na lista 2 todas as opções marcadas na lista 1 através da função append do JQuery. Repare também que com um simples option[@selected] conseguimos pegar todas as opções selecionadas da lista 1 (Você pode aprender mais sobre como “pegar” objetos através do JQuery clicando aqui:).

Antes de seguir com o código, irei fazer uma demonstração de como poderíamos criar a mesma função através de JavaScript puro. Repare na diferença no número de linhas:

<script language="javascript">
function transfereItem(idList, idList2){
	var transferir = new Array();
	var contador = 0;
    	var oldList = document.getElementById(idList); 
	var opcoes = oldList.getElementsByTagName("option"); 
	var newList = document.getElementById(idList2); 
 
	// Pega as opcoes selecionadas
	for (var i = 0; i < opcoes.length; i++) { 
		if (opcoes[i].selected == true) {
			transferir[contador] = opcoes[i];
			contador++;
		}
	}
 
	// Passa para a nova lista
	for (var i = 0; i < transferir.length; i++) { 
		newList.appendChild(transferir[i]);
	}
}
</script>

Impressionado com a diferença? Agora vamos continuar com nossos selects criando os mesmos:
- Primeira lista com algumas opções para teste:

<select name="lista1" id="lista1" size="10" multiple="multiple">
<option value="1">Um</option>
<option value="2">Dois</option>
<option value="3">Três</option>
<option value="4">Quatro</option>
<option value="5">Cinco</option>
<option value="6">Seis</option>
</select>

- Agora o segundo select para fazer a transferência:

<select name="lista2[]" id="lista2" size="10" multiple="multiple"></select>

Estamos quase terminando, agora só precisamos criar as setas para transferir os elementos entre os dois Selects, repare que também poderíamos fazer a transferência ao realizar um duplo clique em cima de um elemento através do evento “ondblclick”.

<a href="#" onclick="transfereItem('lista1', 'lista2');"> &lt; </a>
 
<a href="#" onclick="transfereItem('lista2', 'lista1');"> &lt; </a>

Pronto, os selects com transferência já estarão funcionando. Observe que passei dentro da função chamada no link o ID contido nos dois selects, indicando de qual para qual select os elementos irão ser transferidos.
Você pode ver o exemplo do código funcionando clicando aqui