Ausführen einer Funktion, wenn Aufwärts-/Abwärtspfeile verwendet werden, in einem <select>

Question

Ich habe wie dieses ein Dropdown-Menü zu bewegen:

<select id="test"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 

Wenn ich etwas ausgeführt werden soll, wenn der Benutzer die Auswahl ändert, ist es einfach mit jQuery's .change(). Es ist jedoch bekannt, dass dies nicht funktioniert, wenn der Benutzer die <select> aktiv hat und sich nur durch Optionen mit den Pfeilen nach oben/unten (oder anderen Methoden der Tastaturnavigation) bewegt.

Dies ist ein Problem für meinen Anwendungsfall. Ich brauche ein Ereignis, das basierend auf dem ausgewählten Wert ausgelöst wird, auch wenn Aufwärts-/Abwärtspfeile zum Anzeigen verschiedener Optionen verwendet werden.

Ich bin nicht die erste Person, die dieses Problem hat. Here's a discussion of this issue, die grundsätzlich besagt, dass Sie nach Tasten drücken müssen, wenn Sie dieses Szenario in allen Browsern behandeln möchten. Andere ähnliche Fragen haben hier ähnliche Antworten. Aber ... es funktioniert nicht, wie ich unten erläutern werde.

Scheinbar ist der einfachste Weg, dies zu beheben, zu verwenden, jQuery's .keypress() zu beachten, wenn die <select> aktiv ist und eine Taste gedrückt wird. Etwas wie folgt aus:

<select id="test"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 

<div id="log"> 

<script> 
    var log = $("#log"); 
    var select = $("#test"); 
    select.change(function() { log.append(select.val() + "<br>"); }); 
    select.keypress(function() { log.append(select.val() + "<br>");; }); 
</script> 

You can try it out here.

ich dies in Chrome getestet 25 (Ubuntu 12.10 und Windows XP), Firefox 19 (Ubuntu 12.10) und IE 7 (Windows XP), das sind die einzigen Browser Ich bin sofort zur Hand.

Mein Code funktioniert gut in allen außer Firefox. In meinem Beispiel klicke zweimal auf das Dropdown-Menü, um es mit geschlossenem Menü auszuwählen, drücke dann "runter, runter, runter" (zu 2, 3 und 4 wechseln) und "hoch, hoch, hoch" (bewegt sich zu 3, 2 und 1) und Sie sehen diese Ausgabe:

2 
3 
4 
3 
2 
1 

Großartig, perfekt. Aber in Firefox, tun genau die gleiche Sache Ausgaben:

1 
2 
3 
4 
3 
2 

Es ist um einen Eintrag zurück. Der ausgegebene Wert ist der vorherige, nicht der aktuelle Wert. Das ist ein Problem.

Irgendwelche Ideen, wie man es repariert?

Answer 1

In FireFox change Ereignis nach kepress Ereignis ausgelöst wird, können Sie keyup statt keypress verwenden:

select.keyup(function() { 
    log.append(this.value + "<br>"); 
}); 

http://jsbin.com/ezalav/3