You can't override the select
element onClick
because it doesn't have one. When you click on a select
the browser handles it with magic that you can't temper with. You can't simulate a click on it either.
The only things you can do to a select are:
- change its
size
property. You can change it to1
to force it to close, but you will see an ugly flicker. - set
hidden
property on all childoption
elements totrue
You can fake it, something like this:
HTML:
<div class="wrapper">
<select id="selectId" size="2" multiple="true">
<option value="volvo" hidden="true">Volvo</option>
<option value="saab" hidden="true">Saab</option>
<option value="opel" hidden="true">Opel</option>
<option value="audi" hidden="true">Audi</option>
</select>
<div class="mask">Volvo</div>
</div>
Javascript:
$('.wrapper').click( function(event){
console.log("sdsd");
if(true){
$('#selectId').show();
$(".mask").hide();
}
event.stopPropagation();
});
$('body').click(function(){
$('#selectId').hide();
$(".mask").show();
});
CSS:
.mask{
position:absolute;
top:0;
width:100%;
height:100%;
text-align:center;
}
.wrapper{
position:relative;
display:inline-block;
min-height:23px;
min-width:62px;
vertical-align:top; overflow:hidden; border:solid grey 1px;
}
#selectId{
display:none;
padding:20px;
margin:-18px -30px -18px -8px;
}
This is only a starting point. You can build from here.