opening ul menu by disabling the button

1

I have a select made with a ul and I have the following problem: When I open select , it goes over 2 botões .

And after that, both botões are desabilitados .

What should be happening?

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

    //contador de vezes que abre e fecha a ul
    contador = 0;

    $(".selectOptions .selecionada").click(function(e) {

        quantasLis = $(".selectOptions ul li").length;

        if (contador % 2 == 0) {

            $(".selectOptions .selecionada").addClass("setaCima").removeClass("setaBaixo");
            $(".selectOptions ul").css("display", "block");
            $(".selectOptions ul li").slideDown(400);

            if (quantasLis > 4) {
                $(".selectOptions ul").css('height', '175px');
                $(".selectOptions ul").css("overflow-y", "scroll");
            } else {
                $(".selectOptions ul").css('height', (quantasLis*35)+'px');
                $(".selectOptions ul").css("overflow-y", "auto");
            }

            janela = $(window).height();

            selecionadaPosicao = $(".selectOptions .selecionada").offset().top;
            selecionadaAltura = $(".selectOptions .selecionada").height();
            ulAltura = $(".selectOptions ul").height();
            janelaScroll = $(window).scrollTop(); // distância que a página foi rolada

            posicaoFinal = ulAltura + $(".selectOptions .selecionada").outerHeight();

            total = selecionadaPosicao + selecionadaAltura + ulAltura - janelaScroll;

            if (total >= janela)
                $(".selectOptions ul").css("bottom", posicaoFinal, "important");
            else             
                $(".selectOptions ul").css("bottom", "0", "important");


        } else {

            $(".selectOptions .selecionada").addClass("setaBaixo").removeClass("setaCima");
            $(".selectOptions ul li").slideUp(400, function() {
                $(".selectOptions ul").css("overflow-y", "hidden");
            });
        }

        contador++;

        e.stopPropagation();

    });

    /*ai clicar na li, busca correspondência na select option e o checa (marca)*/
    $('.selectOptions ul li').on('click', function(evt) {
        /*Joga a li selecionada na label .selecionada*/
        $(".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;
        });
        // Redefine o atributo do elemento encontrado pra selecionado.
        opcao.attr('selected', true);

    });

    // 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");
        }
    });

});
@charset "utf-8";
/* CSS Document */
ul {
    list-style: none;
}
.selectOptions {
	position:relative;
	display:block;
	width:200px;
	height:35px;	
}
.selectOptions select {
	display:none;
}
.selectOptions .selecionada {
	display:block;
	background-color: rgb(200,200,200);
	
}
.selectOptions .selecionada:after {
	position: absolute;
	display: block;
	content: "";
	top: 1px;
	right: 1px;
	width: 33px;
	height: 33px;
	background-image: url('http://hotplateprensas.com.br/estilos/_imgs/setaBaixo.jpg');
}
.selectOptions .selecionada.setaBaixo:after {
	background-image: url('http://hotplateprensas.com.br/estilos/_imgs/setaBaixo.jpg');
}
.selectOptions .selecionada.setaCima:after {
	background-image: url('http://hotplateprensas.com.br/estilos/_imgs/setaCima.jpg');
}

.selectOptions ul {
	position:relative;
	display:none;
	width:100%;
	z-index:3;
}
.selectOptions ul li{
	cursor:pointer;
	background-color:rgb(240,240,240);
}
.selectOptions ul li:last-child {
	border-bottom: none;
	
}
.selectOptions  ul li:hover{
	background-color: rgb(200,200,200);
}
.selectOptions ul li,
.selectOptions .selecionada {
	position:relative;
	width:94.1%; /*.01 para encobrir os botões abaixo pois estava dando uma abertura com 94% apenas*/
	height:34px;
	line-height:34px;	
	padding:0 3% 0 3%; 
	border-bottom: rgb(200,200,200) 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><divclass="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>
<br />
<br />
<input type="button" class="borderRadiusInputs" value="Enviar" / >
<input type="submit" class="borderRadiusInputs" value="Enviar" />
    
asked by anonymous 22.10.2017 / 19:14

1 answer

1

The problem is that the listbox after closed remains invisible over the buttons, preventing the mouse cursor from accessing the buttons.

When you close the listbox, you must decrease the height of listbox again:

In the else , where it has a slideUp , change the code to the following code by setting the listbox to 0:

$(".selectOptions ul li").slideUp(400, function() {
    $(".selectOptions ul").css({
        "overflow-y": "hidden",
        "height":"0"

    });
});
    
22.10.2017 / 20:31