Gibt es eine Möglichkeit festzustellen, ob ein <select> Dropdown-Menü geöffnet ist?

Question

Ich suche nach einer Möglichkeit zu bestimmen, ob/wann ein <select> Menü geöffnet ist. Ich muss es nicht zwingen, es zu öffnen oder zu schließen, sondern einfach herausfinden, ob es zu einem bestimmten Zeitpunkt offen oder geschlossen ist.

Ich kann Ereignisse für Fokus/Unschärfe, MouseUp/MouseDown usw. hören, aber ich glaube nicht, dass ich zuverlässig den Zustand des Menüs aus diesen Ereignissen herausfinden kann. Zum Beispiel könnte mousedown gefolgt von mouseup bedeuten, dass der Benutzer auf eine Auswahl geklickt und gezogen hat (in diesem Fall ist das Menü jetzt geschlossen) oder angeklickt und freigegeben, um das Menü zu öffnen (in diesem Fall ist das Menü geöffnet). Es scheint auch wahrscheinlich, dass das spezifische Verhalten von Dropdown-Menüs Browser-abhängig ist.

Ich weiß, ich könnte dies tun, wenn ich mein eigenes Dropdown-Menü rollen, aber ich bevorzuge <select>.

Gibt es eine zuverlässige Möglichkeit herauszufinden, ob ein Dropdown-Menü geöffnet ist? Oder ist das etwas, das Javascript nicht wissen kann?

Fazit: Es scheint keine garantierte Möglichkeit zu geben, zu bestimmen, ob ein Auswahlmenü geöffnet ist, entweder indem man das Objekt anfragt oder die Ereignisse abhört, die ausgelöst werden.

Für meinen eigenen Gebrauch bin ich gerade zu halten Spur davon, ob die ausgewählten Fokus hat onfocus und onblur verwenden. Ich gehe davon aus, dass das Menü ohne Fokus nicht geöffnet werden kann, und das scheint in allen Browsern, die ich getestet habe, zu gelten. Es sagt mir zwar nicht, wann das Menü geöffnet ist, aber es sagt mir wann es nicht offen sein kann, was für meine Zwecke gut genug ist.

Answer 1

Sie können in ausgewählten der option Kind-Elemente mit mouseenter Ereignis spielen, wie Sie nur in sie eintreten können, wenn wählen Sie das Menü geöffnet ist, oder auch mit dem click Ereignis auf dem select Element, in der Regel ausgelöst, wenn Sie es öffnen.

Um in einem genauen Moment zu testen, ob es offen ist oder nicht, denke ich, ist nicht möglich.

Answer 2

Ausgewählte Elemente sind im Internet Explorer bekanntermaßen knifflig. Ich glaube nicht, dass man zuverlässig feststellen kann, ob man offen oder geschlossen ist.

Answer 3

Ich kann sehen, ob die Auswahl geöffnet ist, und dann, wenn es schließt, wenn der Benutzer eine neue Option wählt, oder die Auswahl völlig verwischt. Wenn Sie jedoch auf dieselbe Option klicken oder nur einmal auf die Auswahl klicken (schließen, aber nicht verwischen), wird immer noch "nach unten" angezeigt. Arbeiten an einer vollständigeren Lösung. Also, erwarten, dass diese Antwort bearbeitet haben ...

<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: hinzugefügt mouseout

Edit2: hinzugefügt mouseup - funktioniert jetzt!

Answer 4

würde Eine vollständigere Lösung:

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