JavaScript-Ereignis, wenn Optionen auswählen angezeigt werden?

Question

Welcher Event wird ausgelöst, wenn ein <select> Element seine Liste anzeigt/ausblendet?

Beispiel:

<select> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select> 

Wenn Sie mit einer Maus in diesem Auswahlfeld klicken zeigt der Browser die Liste der Optionen.

Wenn Sie jedoch in die Auswahlbox wechseln, zeigt der Browser die Liste der Optionen nicht an.

Ist die einzige Möglichkeit, nach einem MouseUp-Ereignis innerhalb des Select-Elements zu suchen, oder fehlt mir etwas Offensichtliches?

$(document.body).on('mouseup', 'select', function(){    
    console.log('Either shown or hidden the options...but which?') 
}); 

Vielen Dank im Voraus.

P.S. Ich versuche, dem Element <select> eine Klasse hinzuzufügen, wenn es die <options> zeigt, damit ich einen anderen benutzerdefinierten Caret-Stil zeigen kann, wenn der Browser das "Optionen-Popover" anzeigt, als wenn es nicht angezeigt wird.

Answer 1

Das würde bedeuten, dass das Select-Element im Fokus ist. In diesem Szenario benötigen Sie kein Javascript. Sie können dafür mit CSS sorgen.

select:focus { 
    color:red; 
} 

Aber wenn Sie jQuery verwenden wollte wäre es etwa so aussehen:

$("select").focus(function(){ 
    console.log(" h1 "); 
}) 

rein Javascript verwenden, geben Sie Ihre wählen Sie eine id = „select“ und man konnte so etwas tun:

var x = document.getElementById("select"); 
x.addEventListener("focus", myFocusFunction, true); 
x.addEventListener("blur", myBlurFunction, true); 

function myFocusFunction() { 
    document.getElementById("select").style.backgroundColor = "yellow"; 
} 

function myBlurFunction() { 
    document.getElementById("select").style.backgroundColor = ""; 
}