18 de julho de 2010Combox combinado de forma simples

Nada melhor que a biblioteca jquery junto com seu evento .change() para criar exatamente o que o título desse post diz, detectar e manipular eventos dentro de um menu select de forma simples e rápida. Foi com ela que em poucos minutos resolvi minha necessidade de criar alguns select´s combinados. Veja a seguir 2 formas para se conseguir essa funcionalidade.

Utilizando estrutura Switch

Utilizada para fazer comparações e tomar decisões para realizar funções em cima de variáveis, funciona como um if. Se o valor for igual, faça isso.

Html

     selecione a marca 
     Ford 
	 BMW 


	 KA 
     Fiesta 
	 Focus 
	 Range 
	 EcoSport 


	 120i 
     130i 
	 330i 
	 330iA 
	 z4 

Javascript

	$(document).ready(function(){
	$("#ford , #bmw").hide()
	$("#fabricante").change(
	function(){
		var fabricante = $("option:selected", this).val();

			switch(fabricante){
			case 'ford':
			$('select:not("#fabricante")').hide();
			$("#ford").show();
			break;

			case 'bmw':
			$('select:not("#fabricante")').hide();
			$("#bmw").show();
			break;
			}
	});
	});

Linha 2: Primeira coisa é deixarmos invisíveis os combos que aparecerão posteriormente de acordo com a opção selecionada.
Linha 3: Aqui vamos detectar se houve alguma mudança em nosso select.
Linha 4 e 5: Vamos criar uma variável com o nome fabricante e guardar o texto contido no valor do option que foi selecionado.
Linha 6 até 15: Tendo o valor do option selecionado guardado em nossa variável, vamos então verificar se existe algum elemento com o ID igual ao valor da nossa variável. Ele encontrando, seleciona todos os selects do documento, exceto o select de id#fabricantes e esconde. Em seguida deixa visível o select cujo ID seja igual ao valor da variável.

Veja esse exemplo funcionando

bem simples né? vamos agora fazer um mais otimizado:

Encontrando o valor da variável através do construtor $

Podemos fazer essa funcionalidade ainda mais otimizada e automática. Para isso, basta trocarmos o modo de resgatar e comparar o valor da variável. Em vez de utilizarmos Switch vamos utilizar o construtor pardão do jquery $.

Javascript

$(document).ready(function(){
$("#ford , #bmw").hide()
$("#fabricante").change(
function(){
	var fabricante = $("option:selected", this).val();
	$('select:not("#fabricante")').hide();
	$('#' +fabricante).show();
	});
});

Linha 2: Primeira coisa é deixarmos invisíveis os combos que aparecerão posteriormente de acordo com a opção selecionada.
Linha 3: Aqui vamos detectar se houve alguma mudança em nosso select.
Linha 4 e 5: Vamos criar uma variável com o nome fabricante e guardar o texto contido no valor do option que foi selecionado.
Linha 6: Vamos fazer nosso construtor localizar todos os selects do documento, exceto o que possui o id #fabricantes e vamos esconder.
Linha 7: Aqui é a mágica da otimização, vamos dessa vez apenas passar para o construtor a variável que antes salvou o valor do option selecionado. Ele encontrando algum id igual a esse valor mudará o estado do elemento para visível.

Veja esse exemplo funcionando

Bom, é isso aí galera. um abraço!

Nenhum Comentário »

Nenhum comentário ainda.

Feed RSS dos comentários deste post URL de TrackBack

Deixe um comentário

Nome (obrigatório)

Email (não será publicado) (obrigatório)

Site

ThiagoFasano - Portfólio versão 2.0