Abrir ul para cima

[Carlos Rocha]

Bom, criei um plugin de uma ul que preenche suas li's com os options de algum select.

Tudo OK.

Mas de repente estou com 4 problemas para resolver e dependo da ajuda de vocês.

À principio, esse select pode ser visto em http://www.hotplateprensas.com.br/estilos/.

1) De uma forma geral, qualquer select, quando clicado, caso dê para abir suas options na vertical e para baixo, beleza, é a prioridade. No entando, quando é o caso em que o select está no fim da página, nesse cado, as options abrem para o alto aparecendo acima dos elementos html que estão em cima dela. O que eu preciso fazer é exatamente esse comportamento quando abrir a ul que está substituindo o select. Como fazer?

2) Se notarem bem no select, perceberam que quando abre o overflow scroll dele, dá para notar que existe um buraco entre o final da li e o inicio do scroll e dá para ver os elementos sobrescritos que estão abaixo por essa brecha. Como corrigir isso?

3) Quando abro a ul, aparece o scrool. Note que a ul abre como efeito de slideDown(), slideUp(). Será que existe uma forma de adicionar esse plugin também ao scroll?

4) O scrool, não aparece quando fecho a ul. Está certo, pois coloquei overflow: hidden. Mas Gostaria de fazer da mesma forma que a ul se retrai com efeito, o scroll também se retraisse da mesma forma. Será que trem jeito?

HTML

    <div class="selectOptions">
      <select required>
        <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>
        <option value="7">Sete</option>
        <option value="8">Oito</option>
      </select>
      <label class="selecionada"></label>
      <ul>
      </ul>
    </div>

CSS

    @charset "utf-8";
    /* CSS Document */
    .selectOptions {
        display:block;
        position:relative;
        width:200px;
        height:35px;    
    }
    .selectOptions select {
        display:none;
    }
    .selectOptions .selecionada {
        display:block;
        
    }
    .selectOptions .selecionada:after {
        display: block;
        position: absolute;
        content: "";
        top: 1px;
        right: 1px;
        width: 33px;
        height: 33px;
        background-image: url(../_imgs/setaBaixo.jpg);
    }
    .selectOptions .selecionada.setaBaixo:after {
        background-image: url(../_imgs/setaBaixo.jpg);
    }
    .selectOptions .selecionada.setaCima:after {
        background-image: url(../_imgs/setaCima.jpg);
    }
    
    .selectOptions ul {
        display:none;
        width:100%;
    }
    .selectOptions ul li{
        cursor:pointer;
    }
    
    .selectOptions ul li,
    .selectOptions .selecionada {
        position:relative;
        width:94%;
        height:34px;
        line-height:34px;    
        padding:0 3% 0 3%; 
        border-bottom: rgb(200,200,200) 1px solid;
        background-color:rgb(240,240,240);
    }
    
    .selectOptions  ul li:hover,
    .selectOptions  .selecionada {
        background-color: rgb(200,200,200);
    }

jQuery

    $(document).ready(function(e) {
      
      // entrega o primeiro elemento da select option à div .selecionada
      $(".selectOptions .selecionada").html($(".selectOptions select > option:first-child").html());
    
      /*popula as li's*/
      $(".selectOptions select > option").each(function() {
          //Não exibe a primeira li pois esta já está sendo exibida na .selecionada
          if($(this).is(':first-child')) $(".selectOptions ul").append("<li value='"+this.value+"' style='display:none;'>"+this.text+"</li>");      
          else $(".selectOptions ul").append("<li style='display:block;' value='"+this.value+"'>"+this.text+"</li>");
      });
    
      function exibeSelectUl () {
          
          $(".selectOptions ul > li").each(function() {
              
              if($.trim($(this).text()) === $.trim($(".selectOptions .selecionada").html())) 
                   $(this).css("display","none", "important");
              else   
                   $(this).css("display","block","important");
    
          });
          
           $(".selectOptions ul").css("display","block");
          
      }
    
      contador=0;
      
       $(".selectOptions .selecionada").click(function(e) {
    
          exibeSelectUl();
                
          quantasLis = $(".selectOptions ul li").length;
          
          if(contador % 2 == 0) {                    
              
              $(".selectOptions .selecionada").addClass("setaCima").removeClass("setaBaixo");
              $(".selectOptions ul li").css("display","none").slideDown(400); 
    
              if(quantasLis > 4) {        
                  $(".selectOptions ul").css('height', '175px');
                  $(".selectOptions ul").css("overflow-y", "scroll");
              } else {
                  $(".selectOptions ul").css('height', 'auto');
                  $(".selectOptions ul").css("overflow-y", "auto");
              }
              
          } else {    
          
              $(".selectOptions .selecionada").addClass("setaBaixo").removeClass("setaCima");
              $(".selectOptions ul li").slideUp(400, function(){
                  $(".selectOptions ul").css("overflow-y", "hidden");
              });
          }
    
          contador++;
          
          e.stopPropagation();
          
      });    
     
      // ao clicar em qualquer coissa, fecha a ul caso ela esteja aberta
      $(document).on('click',function(e){
          if(
               $(".selectOptions ul").css("overflow-y") == "auto" ||
               $(".selectOptions ul").css("overflow-y") == "scroll") {
                   $(".selectOptions .selecionada").trigger("click");
          }
      });
    
    /*ai clicar na li, busca correspondência na select option e o checa (marca)*/
     //$(".selectOptions .selectOption ul li:not(:eq(0))").on( 'click',function(evt){
     $( '.selectOptions ul li' ).on( 'click', function( evt ){ 
         /*Joga a li selecionada a label*/
         $(".selectOptions .selecionada").html($(this).html());
         /*Joga a li selecionada ao topo da ul*/
         $($(this).closest('ul')).prepend($(this)); 
          // Armazena nome do maos que quer selecionar
          var li = $(this).attr("value");
          // 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;
          });
    
          exibeSelectUl();
          
          // Redefine o atributo do elemento encontrado pra selecionado.
          opcao.attr('selected', true);                 
             
     });
    
    });