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" />