@dvdsamm, acho que consegui o efeito final.
Mas alguma coisa não está legal.
Quando fecha a ul, então está havendo um atraso em relação à contração da div pai da ul.
Onde foi que errei?
$(document).ready(function(e) {
/*popula as li's*/
$(".selectOptions select > option").each(function() {
$(".selectOptions .selectOption ul").append("<li id="+this.value+">"+this.text+"</li>");
});
/*cria um contador para contar as aberturas e fechamentos da ul*/
contador = 0;
/*ao clicar na ul, abre/fecha a ul*/
$(".selectOptions .selectOption").click(function(e) {
quantasLis = $(".selectOptions .selectOption ul li" ).length;
if(contador % 2 == 0) {
$(".selectOptions .selectOption").addClass("setaCima").removeClass("setaBaixo");
$(".selectOptions .selectOption ul li:not(:first)").css("display","none").slideDown(400);
if(quantasLis > 4) {
$(".selectOptions .selectOption ul").css("width", "217px");
$(".selectOptions .selectOption ul").css('height', '175px');
$(".selectOptions .selectOption ul").css("overflow-y", "scroll") ;
} else {
$(".selectOptions .selectOption ul").css("width", "200px");
$(".selectOptions .selectOption ul").css('height', 'auto');
}
} else {
$(".selectOptions .selectOption").addClass("setaBaixo").removeClass("setaCima");
$(".selectOptions .selectOption ul").css("width", "200px");
$(".selectOptions .selectOption ul li:not(:first)").slideUp(400, function(){
$(".selectOptions .selectOption ul").css("overflow-y", "scroll");
$(".selectOptions .selectOption ul").css('height', '35px');
});
}
e.stopPropagation();
contador++;
});
$(document).on('click',function(e){
if($(".selectOptions .selectOption ul").css("overflow") == "visible"){
$(".selectOptions .selectOption").trigger("click");
}
e.stopPropagation();
});
/*ai clicar na li, busca correspondêcia na select option e o checa (marca)*/
//$(".selectOptions .selectOption ul li:not(:eq(0))").on( 'click',function(evt){
$( '.selectOptions .selectOption ul li' ).on( 'click', function( evt ){
/*Joga a li selecionada ao topo da ul*/
$($(this).closest('ul')).prepend($(this));
// Armazena nome do mês que quer selecionar
var li = $(this).attr("id");
// Guarda em opcao o elemento que retornar do filtro que vai testar entre as
// options possÃveis
var opcao = $('.selectOptions select option').filter(function() {
// testa entre as options qual delas tem o mesmo conteúdo que o desejado
return $(this).attr('value') === li;
});
// Redefine o atributo do elemento encontrado pra selecionado.
opcao.attr('selected', true);
});
});