Detect Drop Down Openes

Is there any way (in plain JS or jQuery) to detetect exactly that moment, a drop down (select-tag) opens? To clarify more, a small example: If you click 5 times on a select, the fo

Solution 1:

Look at this code:

HTML:

<scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script><selectid="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 is here

Solution 2:

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

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

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

Solution 3:

Expanding a little the answer from @Todd

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

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

What we are doing is adding some attributes to the element, in this case, when you first click on a select element, it will ask for its data-IsOpen attribute, since it doesn't exists, we will initialize it with a 1, indicating that the select is open.

When we click on it again we ask the same, now that it's open, we will update the attribute to 0, indicating that it's closed.

Hope this helps, Cheers.