$(document).ready(function() {
$('div#bloqueioSelect').click(function() {
if ($('div#bloqueioSelect ul').is(':visible')) {
$('div#bloqueioSelect ul').css('display', 'none');
$('div#bloqueioSelect div img').prop('src', 'imgs/setaBaixo.jpg');
} else {
$('div#bloqueioSelect ul').css('display', 'block');
$('div#bloqueioSelect div img').prop('src', 'imgs/setaCima.jpg');
}
});
$('div#bloqueioSelect ul li').click(function() {
$('input[type=hidden]#bloqueio').val($(this).val());
});
});
* {
margin: 0;
padding: 0;
border: 0;
}
div.selecao {
position: relative;
border: 1px #CCCCCC solid;
}
div.selecao div {
height: 30px;
text-align: center;
cursor: pointer;
}
div.selecao div,
div.selecao ul {
display: block;
width: 100%;
background-color: #F8F8F8;
}
div.selecao div * {
display: inline-block;
vertical-align: top;
}
div.selecao div label {
width: calc(100% - 30px);
height: 30px;
line-height: 30px;
}
div.selecao ul {
position: absolute;
left: -1px;
/*Menos 1 pixel da borda*/
top: 30px;
display: none;
border: 1px #CCCCCC solid;
}
div.selecao ul li:not(:first-child) {
border-top: 1px #CCCCCC solid;
}
div.selecao ul li {
display: block;
width: 100%;
height: 30px;
cursor: pointer;
text-align: center;
}
div.selecao ul li:hover {
background-color: #CCCCCC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=hidden value='' name=bloqueio id=bloqueio />
<div class=selecao style='width: 150px;' id=bloqueioSelect>
<div><label>Bloqueio</label><img src="imgs/setaBaixo.jpg" /></div>
<ul>
<li value=1><img src="imgs/bloquear.png" title="Produto Bloqueado" /></li>
<!--
-->
<li value=0><img src="imgs/desbloquear.png" title="Produto Desbloqueado" /></li>
</ul>
</div>
Tenho esse código que estilizei um select.
Nesse código existe um JavaScript para popular um input hidden
Gostaria de saber se existe uma forma de generalizar essa função de forma tal que eu não necessite de fazer uma chamada caso eu crie vários id's para os selects.
Exemplo: esse código só vai funcionar para o id=bloqueioSelect.
Caso eu tenho outro select, por exemplo: id=cidadeSelect, não vai funcionar.
Ou será que existe algum recurso sem a necessidade de fazer a chamada no próprio campo?
<div class=selecao style='width: 150px;' id=bloqueioSelect onclick='funcao();'>
Era isso que estava querendo evitar