Salve todos,
Depois de muito tempo sem escrever, volto a este blog entregue as traças para completar a transferência entre selects de múltipla seleção.

Na primeira parte, vimos como transferir itens entre os dois selects, agora vamos salvar os valores marcados (ou seja, transferidos para o select da direita).

Em primeiro lugar, precisamos selecionar todos os itens do lado direito antes de enviar o formulário. Isso porque o HTML apenas submete os itens marcados e no nosso caso todos os itens do lado direito devem ser enviados, estando selecionados ou não.
Para isso, vamos usar mais uma vez da simplicidade do JQuery criando uma função que será chamada antes de submetermos o formulário:

function envia() {
 
 $('#lista2 option').attr("selected","true");
 
}

Pronto, a função a cima irá selecionar todas as opções da lista 2. Agora basta chamar a função no envio do formulário adicionando o onSubmit=”envia();” na tag <form> das listas. Após submeter o formulário, as opções selecionadas já estarão disponíveis através de um array. Podemos então percorrer este array e utilizar o resultado da forma como quisermos. A seguir vai um pequeno exemplo de como podemos montar uma query de inserção no banco de dados:

foreach ($_POST['lista2'] as $valor) {
 
 $query = "INSERT INTO tabela (selecionados) VALUES ($valor)";
 
}

Agora é com vocês!

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

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.