Detect drop openings

Question

Is there a way (in plain JS or jQuery) to accurately determine this point, a drop-down list (select-tag) opens? To explain in more detail, a small example:

If you press 5 times during selection, the following will happen:

drop down opens   > Event should fire
drop down closes
drop down opens   > Event should fire
drop down closes
drop down opens   > Event should fire

So far, I just can find events for click / focus in / focus.

Answer 1

Take a look at this code:

HTML:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
<select id="fire">
    <option>One</option>
    <option>Two</option>
</select>
<p></p>

JQuery

var flag=1;
$("#fire").click(function(){
    if(flag==1){
         $("p").append("clicked   ");
        flag=0;
    } else {
         flag=1;   
    }
});
$("#fire").blur(function(){
         flag=1; 
});

jsFiddle here

Answer 2

var select = document.getElementById('mySelect');

mySelect.addEventListener('mousedown', function() {
    console.log('mousedown event fired on mySelect');
});

See this script: http://jsfiddle.net/ToddT/hYT9q/

Answer 3

@Todd

var select = document.getElementById('mySelect');

mySelect.addEventListener('mousedown', function() {
    if( $(this).attr("data-IsOpen") == 1 ){
      $(this).attr("data-IsOpen", 0); //it closed
    }else{
      $(this).attr("data-IsOpen", 1); //it open
    }
    var isOpen = ($(this).attr("data-IsOpen") == 1); //should give true or false
    console.log(isOpen);
});

What we do is add some attributes to the element, in this case, when you first click on the select element, it will request its IsOpen attribute for the data, since it does not exist, we will initialize it with a 1, indicating that the selection is open.

When we click on it again, we ask the same thing, now that it opens, we will update the attribute to 0, indicating that it is closed.

Hope this helps, Cheers.