Uruchamianie funkcji, gdy strzałek góra/dół służą do poruszania się w <select>

Question

Mam menu rozwijanego takiego:

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

Jeśli chcę uruchomić coś, gdy użytkownik zmieni swój wybór, łatwo z jQuery's .change(). Jednak wiadomo, że to nie zadziała, jeśli użytkownik ma aktywny <select> i porusza się po opcjach ze strzałkami w górę/w dół (lub innymi metodami nawigacji po klawiaturze).

Jest to problem w moim przypadku użycia. Potrzebuję zdarzenia do uruchomienia w oparciu o wybraną wartość, nawet gdy strzałki w górę/w dół są używane do wyświetlania różnych opcji.

Nie jestem pierwszą osobą, która ma ten problem. Here's a discussion of this issue co zasadniczo oznacza, że ​​musisz szukać klawiszy, jeśli chcesz obsłużyć ten scenariusz we wszystkich przeglądarkach. Inne podobne pytania tutaj mają podobne odpowiedzi. Ale ... to nie działa, co zilustruję poniżej.

Najwyraźniej najprostszym sposobem rozwiązania tego problemu jest użycie jQuery's .keypress(), aby zauważyć, że <select> jest aktywny i naciśnięty jest klawisz. Coś takiego:

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

Testowałem to w Chrome 25 (Ubuntu 12.10 i Windows XP), Firefox 19 (Ubuntu 12.10) oraz IE 7 (Windows XP), które są jedynymi przeglądarek Mam od razu.

Mój kod działa doskonale we wszystkich z nich oprócz Firefoksa. W moim przykładzie kliknij dwa razy menu rozwijane, aby wybrać je z zamkniętym menu, a następnie naciśnij "w dół, w dół, w dół" (przejście do 2, 3 i 4) i "w górę, w górę, w górę" (przejście do 3, 2 i 1), a zobaczysz to wyjście:

2 
3 
4 
3 
2 
1 

Świetne, idealne. Ale w Firefox, dokładnie to samo wyprowadza:

1 
2 
3 
4 
3 
2 

Opóźnia się o jeden wpis. Wyjściowa wartość jest poprzednia, a nie aktualna. To jest problem.

Wszelkie pomysły, jak to naprawić?

Answer 1

w Firefoksie change przypadku jest zwolniony po kepress przypadku można użyć keyup zamiast keypress:

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

http://jsbin.com/ezalav/3