Detect drop down openes

Question

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 following happens:

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 the click/focus in/focus out.

No, I don't believe there is an `open` event; `focus` is probably the best you'll get. — David Thomas, Oct 15 '13 at 17:47
I dont think there is a way... Check out this link to a similar question where he determined it wasnt possible. http://stackoverflow.com/questions/2709474/is-there-a-way-to-determine-if-a-select-dropdown-menu-is-open — Kierchon, Oct 15 '13 at 17:48
so ui framework like kendo ui has implemented such events http://www.kendoui.com/ — Arun Killu, Oct 15 '13 at 17:52

Mohsen Safari · Accepted Answer · 2013-10-15T18:27:47.930

5

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

edited Oct 15 '13 at 18:27

answered Oct 15 '13 at 17:56

Mohsen Safari

6,669
5
42
58

I did the same. It fails, if you unfocus the select by just clicking somewhere on the page, expect the select. – Dennis Oct 15 '13 at 18:04

score 3 · Answer 2 · answered Oct 15 '13 at 17:48

3

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

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

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

answered Oct 15 '13 at 17:48

Todd

1,674
13
13

That wont work. It captures the closing of the dropdown as well. OP only wants the opening – Kierchon Oct 15 '13 at 17:49
Really? Hmm. It wasn't when I tested it in Chrome. At least, I didn't think it did... Just checked it again and, at least in Chrome, it didn't capture the closing. YMMV. – Todd Oct 15 '13 at 17:50
It is for me in chrome. Not necessarily if you click out of the dropdown but if you click on the little arrow repeatedly it will fire for both open and close – Kierchon Oct 15 '13 at 17:52
Ah, okay. I was selecting an option, not repeatedly clicking the select arrow. – Todd Oct 15 '13 at 17:52

score 2 · Answer 3 · answered Oct 15 '13 at 17:57

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.

It fails, if you unfocus the select by just clicking somewhere on the page, expect the select. — Dennis, Oct 15 '13 at 18:05
Awww Snap! well, AFAIK there's no event to detect that precise moment, but you should do flags with mousedown, up, mouseenter, leave, there's an ancient SO question http://stackoverflow.com/questions/2709474/is-there-a-way-to-determine-if-a-select-dropdown-menu-is-open check it out. Cheers! — Sam Ccp, Oct 15 '13 at 18:22

Detect drop down openes

3 Answers3

Linked