Existe-t-il un moyen de déterminer si un menu déroulant <select> est ouvert?

Question

Je cherche un moyen de déterminer si/quand un menu de l'élément <select> est ouvert. Je n'ai pas besoin de le forcer pour ouvrir ou fermer, juste comprendre s'il est ouvert ou fermé à un moment donné.

Je peux écouter des événements pour focus/flou, mouseup/mousedown, etc., mais je ne pense pas pouvoir déterminer de manière fiable l'état du menu à partir de ces événements. Par exemple, mousedown suivi de mouseup pourrait signifier que l'utilisateur a cliqué et fait glisser vers une sélection et a été relâché (auquel cas le menu est maintenant fermé) ou cliqué et relâché pour ouvrir le menu (auquel cas le menu est ouvert). Il semble également probable que le comportement spécifique des menus déroulants dépend du navigateur.

Je sais que je pourrais le faire si je lance mon propre menu déroulant, mais je préfère utiliser <select>.

Existe-t-il un moyen fiable de savoir si un menu déroulant est ouvert? Ou est-ce quelque chose que Javascript ne peut pas savoir?

Conclusion: Il ne semble pas y avoir de moyen garanti de déterminer si un menu de sélection est ouvert, soit en demandant à l'objet ou en écoutant les événements qu'il déclenche.

Pour mon usage, je suis juste garder la trace si la sélection a mise au point avec onfocus et onblur. Je suppose qu'il n'y a aucun moyen pour le menu d'être ouvert sans avoir le focus, et cela semble être vrai dans tous les navigateurs que j'ai testés. Il ne me dit pas quand le menu est ouvert, mais il me dit quand il ne peut pas être ouvert, ce qui est assez bon pour mes besoins.

Answer 1

Vous pouvez jouer avec l'événement mouseenter dans option éléments enfant sélectionnez que vous ne pouvez entrer dans les si le menu de sélection est ouverte, ou encore avec l'événement click sur l'élément select, généralement jeté lorsque vous l'ouvrez.

Pour tester dans un moment précis si son ouverture ou non je pense n'est pas possible.

Answer 2

Les éléments de sélection sont notoirement difficiles dans Internet Explorer. Je ne pense pas qu'il existe un moyen de déterminer de façon fiable si l'un est ouvert ou fermé.

Answer 3

Je peux voir si la sélection est ouverte, puis quand elle se ferme si l'utilisateur sélectionne une nouvelle option, ou floute complètement la sélection. Cependant, si vous cliquez sur la même option, ou si vous cliquez simplement sur le select une fois (en le fermant mais sans le rendre flou), il affiche toujours "down". Travailler sur une solution plus complète. Alors, attendez-vous cette réponse ait des modifications ...

<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: a ajouté mouseout

Edit2: ajout mouseup - fonctionne maintenant!

Answer 4

Une solution plus complète serait:

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