display: none is not being applied

Add to your CSS a class containing display:none :

.hidden {
  display:none !important;
}

In the code that adds select options to the list, check if the option is selected, if it is, add the element to the list as it was already done, but with the 'hidden' class ( I also added the 'ListList' class just to make it easy to select the li after):

if($(this).is(':selected')){
    $(".selectOptions ul").append("<li class='opcaoLista hidden' value='"+this.value+"' >"+this.text+"</li>");
} 
else {
    $(".selectOptions ul").append("<li class='opcaoLista' value='"+this.value+"'>"+this.text+"</li>");
}

In the ShowSelect method, add or remove the hidden class instead of .css ("display", "none"):

 $(".opcaoLista").each(function() {
      //alert($.trim($(this).text()) +'==='+ $.trim($(".selectOptions .selecionada").html()));
      if($.trim($(this).text()) === $.trim($(".selectOptions .selecionada").html())){
         $(this).addClass("hidden");
      } else {
         $(this).removeClass("hidden");
         $(this).show();
      }
  });

Link to the example in CodePen

@ renato-diniz, based on your orientation, I studied your code a lot and then I arranged my own.

I would like you to evaluate and tell me what you think.

It can be viewed online at link

It looks like this:

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) {
  /*
    $('form').submit((function(e) {

       }
    ));
  */

  $(".selectOptions .selecionada").html($(".selectOptions select > option:first-child").html());
  /*popula as li's*/
  $(".selectOptions select > option").each(function() {
      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();

  });   


  $(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);              

 });

});

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>