Skip to content Skip to sidebar Skip to footer

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:

<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 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 false
    console.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.


Post a Comment for "Detect Drop Down Openes"