Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Andre Assis

[Resolvido] Formulário - Manipulação de Selects

Por , em Javascript

Recommended Posts

Andre Assis    0

Andre Assis
Postado

Olá, existem muitos plugins prontos na net que ajudam a criar selects customizáveis, mais muitos deles são compactados ou deveras complexos, abaixo descrevo um código simples e facil de enteder.

 

ATENÇÃO: Para que este script funcione é necessaria a utilização do Jquery 1.4.2 ou superior.

 

Estruturando o HTML 

<select>
    <option value="1">Lorem ipsum</option>
    <option value="2">Nononono nono no nono</option>
    <option value="3">122 non on ononon @@@@@</option>
</select>

* O select é inserido sem nenhum tipo de formatação especial.

* Os values do campo option serão migrados para o html que será gerado.

 

 

Resultado do HTML após a mudança

 

<div class="select">
    <span>Lorem ipsum</span>
    <ul>
        <li value="1">Lorem ipsum</li>
        <li value="2">Nononono nono no nono</li>
        <li value="3">122 non on ononon @@@@@</li>
    </ul>
</div>

 

Estruturando o CSS

O estilo da lista varia de acordo com as necessidades do layout, porém alguns atributos referentes a estrutua é exibição são obrigatórios, segue:

 

.select{
	position: relative;
}
 
.select span, .select ul{
        position:absolute;
	top: 0;
	left:0;
}
 
.select ul {
	display:none;
}

* No momento em que o úsuario passa o mouse em qualquer elemento da lista, essa recebe uma classe "active" para que o estilo possa ser manipulado via css.

 

 

A função

 

$('select').each(function(){
 
	var str = '';
	var actualSelect = this;
 
	str +='<span style="width:' + $(this).width() + 'px;">' + $(this).find('option:first').text() + '</span>';
	str +='<ul>';
	$(this).find('option').each(function(){
		str +='<li value="' + $(this).val() + '">' + $(this).text() + '</li>';								 
	})
	str +='</ul>';
 
	$(this).after($('<div/>')
		.attr('class','select')  
		.css('width',$(this).width())
		 .html(str)
		.click(function(){  
			//atualizo o tamanho do objeto de acordo com o select e adiciono a classe active no over
			$(this).find('*')
			.css('width',$(actualSelect).width())
			.hover(function(){
                                $(this).addClass('active');
			},function(){
				$(this).removeClass('active');
			})
 
			//atualizo o posiciomaneto da ul e adiciono suas acoes
			$(this).find('ul')
			.css('top',$(this).find('span').outerHeight())
			.slideToggle('fast')
			.parent().find('li').click(function(){
			        $(this).parents('div').find('span:first').text($(this).text());
 
				//seleciono o option referente a li clicada
                                $(this).parents('div').prev()
                                .find('option').attr('selected',false)
                               .eq($(this).parent().find('li').index(this))
                                .attr('selected',true)	
			})
		})
	)
}).css('display','none');

 

Testando o código

Caso queira fazer um teste, copie o código abaixo e salve em versão html na sua maquina!

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<style>
	body{
		font: normal 11px verdana;	
	}

	.select{
		position: relative;
		float: left;
		margin: 50px;
	}

	.select span{
		display:block;
		color: #000;
		background-color: aqua;
		position:absolute;
		top: 0;
		left:0;
	}
	
	.select span.active{
		color: aqua;
		background-color: #000;
	}
	
	.select ul {
		position: absolute;
		margin: 0;
		padding: 0;
		display:none;
		left: 0;
		top: 0;
	}
	
	.select ul li{
		background-color: #06C;
		list-style-type: none;
		border-bottom: 1px solid red;
		cursor:pointer;
		color: #fff;
	}
	
	.select ul li.active{
		background-color: #fff;
		color: #06C;
	}
</style>

</head>

<body>
<form name="form1" action="selects.html">
     <select name="1">
        <option value="1">Lorem ipsum</option>
        <option value="2">Nononono nono no nono</option>
        <option value="3">122 non on ononon @@@@@</option>
    </select>  
    
     <select name="2">
        <option value="1">Lorem ipsum</option>
        <option value="2">Nononono nono no nono</option>
        <option value="3">122 non on ononon @@@@@</option>
    </select>
    
     <select name="3">
        <option value="1">Lorem ipsum</option>
        <option value="2">Nononono nono no nono</option>
        <option value="3">122 non on ononon @@@@@</option>
    </select>       
    
    
    <input type="submit" />         
 </form>                                   
 <script type="text/javascript">
	$('select').each(function(){
		
		var str = '';
		var actualSelect = this;
		
		str +='<span style="width:' + $(this).width() + 'px;">' + $(this).find('option:first').text() + '</span>';
		str +='<ul>';
		$(this).find('option').each(function(){
			str +='<li value="' + $(this).val() + '">' + $(this).text() + '</li>';								 
		})
		str +='</ul>';
		
		$(this).after($('<div/>')
			.attr('class','select')  
			.css('width',$(this).width())
			 .html(str)
			.click(function(){  
				//atualizo o tamanho do objeto de acordo com o select e adiciono a classe active no over
				$(this).find('*')
				.css('width',$(actualSelect).width())
				.hover(function(){
					$(this).addClass('active');														   
				},function(){
					$(this).removeClass('active');
				})
				
				//atualizo o posiciomaneto da ul e adiciono suas acoes
				$(this).find('ul')
				.css('top',$(this).find('span').outerHeight())
				.slideToggle('fast')
				.parent().find('li').click(function(){
					$(this).parents('div').find('span:first').text($(this).text());
				
					//seleciono o option referente a li clicada
					$(this).parents('div').prev().find('option').attr('selected',false).eq($(this).parent().find('li').index(this)).attr('selected',true)
				})
			})
		)
	}).css('display','none');
</script>
</body>



</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito