¿Hay alguna manera de determinar si un menú desplegable de <select> está abierto?

Question

Estoy buscando una forma de determinar si un menú del elemento <select> está abierto. No necesito forzarlo para que se abra o cierre, solo averigüe si está abierto o cerrado en un momento dado.

Puedo escuchar eventos de enfoque/desenfoque, mouseup/mousedown, etc., pero no creo que pueda determinar de manera confiable el estado del menú de esos eventos. Por ejemplo, mousedown seguido de mouseup podría significar que el usuario hizo clic y arrastró a una selección y soltó (en cuyo caso el menú ahora está cerrado) o hizo clic y soltó para abrir el menú (en cuyo caso el menú está abierto). También parece probable que el comportamiento específico de los menús desplegables dependa del navegador.

Sé que podría hacer esto si hago rodar mi propio menú desplegable, pero prefiero usar <select>.

¿Hay alguna manera confiable de averiguar si un menú desplegable está abierto? ¿O es algo que Javascript no puede saber?

Conclusión: no parece haber ninguna manera garantizada de determinar si un menú de selección está abierto, ya sea al preguntar al objeto o al escuchar los eventos que se activan.

para mi propio uso sólo estoy manteniendo un seguimiento de si el selecto tiene el foco usando onfocus y onBlur. Supongo que no hay forma de que el menú esté abierto sin tener foco, y eso parece ser cierto en todos los navegadores que he probado. En realidad, no me dice cuándo el menú está abierto, pero me dice que cuando no puede estar abierto, lo cual es suficiente para mis propósitos.

Answer 1

se puede jugar con mouseenter evento en selectas de option elementos secundarios, ya que sólo se puede entrar en ellos si el menú de selección está abierto, o también con el evento click en el elemento select, generalmente tirado cuando lo abre.

Para probar en un momento preciso si está abierto o no, creo que no es posible.

Answer 2

Seleccionar elementos son notoriamente complicados en Internet Explorer. No creo que haya ninguna manera de determinar de manera confiable si uno está abierto o cerrado.

Answer 3

Puedo ver si la selección está abierta, y luego cuando se cierra si el usuario selecciona una nueva opción, o borra completamente la selección. Sin embargo, si hace clic en la misma opción, o simplemente hace clic fuera de la selección una vez (cerrándola pero no difuminándola), aún muestra "abajo". Trabajando en una solución más completa. Por lo tanto, es de esperar que esta respuesta tiene ediciones ...

<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> 

Editar: se ha añadido mouseout

Edit2: mouseup añadido - trabaja ahora!

Answer 4

Una solución más completa sería:

<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>