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&ecirc;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');"> < </a>
<br>
<a href="#" onClick="transfereItem('lista2', 'lista1');"> < </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

Meu primeiro Post vem falar sobre uma das minhas descobertas mais felizes na área tecnológica nos últimos tempos:
Trata-se de uma FrameWork feita para JavaScript que, com certeza, vai lhe poupar muito tempo em desenvolvimento nessa linguagem, incluindo o tratamento de AJAX.

Existem muitas FrameWorks pra JS, porém algo que me chamou muita atenção no JQuery foi a possibilidade de realizar várias ações em um elemento e a possibilidade de se realizar uma ação em muitos elementos sem a necessidade de se criar um loop.

Abaixo vão algumas comparações entre o Prototype (Outra grande FrameWork), o Jquery e JavaScript puro:
- Adicionando uma classe e exibindo uma div:

- JQuery:

$('#idDiv').addClass('ativo').show();

- Prototype:

$('idDiv').addClassName('ativo').show();

- JavaScript:

var div = document.getElementById('idDiv');
div.className = 'ativo';
div.display = 'block';

Notamos a diferença entre o Javascript e as frameworks, mas e se quiséssemos aplicar essa classe e mostrar todas as divs da página? Faríamos algo mais ou menos assim:

- JQuery:

$("div").addClass('ativo').show();

- Prototype:

$A(document.getElementsByTagName('div')).each(
	function(elemento) {
		elemento.addClassName('ativo').show();
	}
);

- Javascript:

var divs = document.getElementsByTagName("div");
for (var i = 0; i ++; divs.length; i++) {
	div[i].className = 'ativo';
	div[i].display = 'block';
}

Agora fica claro a vantagem do Jquery em relação ao Prototype: Em quanto no prototype precisamos realizar as ações dentro de um Loop, no Jquery resolvemos todo o problema em uma linha.

Além disso, existem mais alguns pontos que me chamaram a atenção sobre o Jquery:
- Tamanho da FrameWork (aproximadamente 28kbs compactado)
- Documentação muito simples de ser usada (http://docs.jquery.com/)
- Comunidade Brasileira comprometida com o produto (http://www.jquerybrasil.com/)
- Livre para download e desenvolvimento.

Espero ter despertado interesse sobre o JQuery, pois uma vez que começamos a usá-lo, até esquecemos do velho JavaScript puro.