Is there a way to determine if a <select> dropdown menu is open?

Question

I'm looking for a way to determine if/when a <select> element's menu is open. I don't need to force it to open or close, just figure out if it's open or closed at a given time.

I can listen to events for focus/blur, mouseup/mousedown, etc., but I don't think I can reliably figure out the state of the menu from those events. For example, mousedown followed by mouseup could mean the user clicked and dragged to a selection and released (in which case the menu is now closed) or clicked and released to open the menu (in which case the menu is open). It also seems likely that the specific behavior of dropdown menus is browser-dependent.

I know I could do this if I roll my own dropdown menu, but I prefer to use <select>.

Is there a reliable way to find out if a dropdown menu is open? Or is this something that Javascript can't know?

Conclusion: There doesn't seem to be any guaranteed way to determine if a select menu is open, either by asking the object or by listening to the events it fires.

For my own use I'm just keeping track of whether the select has focus using onfocus and onblur. I'm assuming there's no way for the menu to be open without having focus, and that seems to hold true in all the browsers I've tested. It doesn't actually tell me when the menu is open, but it tells me when it can't be open, which is good enough for my purposes.

Answer 1

You can play with mouseenter event in select's option child elements as you can only enter in them if select menu is open, or also with the click event on the select element, usually thrown when you open it.

To test in a precise moment if its open or not I think is not possible.

Answer 2

Select elements are notoriously tricky in Internet Explorer. I don't think there is any way of reliably determining if one is open or closed.

Answer 3

I can see if the select is open, and then when it closes if the user selects a new option, or completely blurs the select. However, if you click on the same option, or just click out of the select once (closing it but not blurring it), it still shows "down". Working on a more complete solution. So, expect this answer to have edits...

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
  var selected
$( document ).ready(


 function()
 { 
  $( '#test' )
      .mousedown( function(){ console.log( 'down' ); selected = $( this ).val() } )
      .blur( function(){ console.log( 'out' ) } )
      .change( function(){ console.log( 'out' ) } )
      .mouseleave( function(){ console.log( 'out' ) } )
      .mouseup( function(){ 
         if( $( this ).val() == selected ) 
           console.log( 'out' )
    }
   )
 } // function

) // ready
</script>

<select id="test">
 <option>1</option>
 <option>2</option>
</select>

Edit: added mouseout

Edit2: added mouseup - works now!

Answer 4

A more complete solution would be:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
var selected,selected2
$( document ).ready(


 function()
 { 
  $( 'select[id$="test"]' )
      .mousedown( function(){ 
        console.log( 'predown' );
        if( $( this ).val() != selected ) {
          console.log( 'down' ); 
          selected = $( this ).val();
          selected2=null;} 
        else  
          selected=null;} )
      .blur( function(){ if (selected2==selected) {
        console.log( 'outb' );
        selected=null;
        selected2=null;} } )
      .mouseup( function(){ console.log( 'preoutu' );
         if( $( this ).val() != selected || $( this ).val() == selected2 ) {
            console.log( 'outu' );
            selected=null;
            selected2=null;
         }
         else
           selected2=$( this ).val();   
    }
   )
 } // function

) // ready
</script>


<select id="1test">
 <option>1</option>
 <option>2</option>
</select>
<select id="2test">
 <option>1</option>
 <option>2</option>
</select>