Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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">](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">](http://code.jquery.com/jquery-1.4.2.min.js)
<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>Carregando comentários...