Esecuzione di una funzione quando frecce su/giù vengono utilizzati per muoversi in una <select>

Question

Ho un menu a tendina in questo modo:

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

Se voglio eseguire qualcosa ogni volta che l'utente cambia la loro selezione, è facile con jQuery's .change(). Tuttavia, è risaputo che questo non funziona se l'utente ha il <select> attivo e sta semplicemente spostandosi tra le opzioni con le frecce su/giù (o altri metodi di navigazione da tastiera).

Questo è un problema per il mio caso d'uso. Ho bisogno di un evento da attivare in base al valore selezionato anche quando le frecce su/giù vengono utilizzate per visualizzare diverse opzioni.

Non sono il primo ad avere questo problema. Here's a discussion of this issue che in pratica dice che devi cercare i tasti di pressione se vuoi gestire questo scenario in tutti i browser. Altre domande simili qui hanno risposte simili. Ma ... non funziona, come illustrerò di seguito.

Apparentemente il modo più semplice per risolvere questo problema è utilizzare jQuery's .keypress() quando lo è attivo e viene premuto un tasto. Qualcosa di simile a questo:

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

Ho provato questo in Chrome 25 (Ubuntu 12.10 e Windows XP), Firefox 19 (Ubuntu 12.10), e IE 7 (Windows XP), che sono gli unici browser Ho immediatamente a portata di mano.

Il mio codice funziona perfettamente in tutti tranne Firefox. Nel mio esempio, fai clic due volte sul menu a discesa per selezionarlo con il menu chiuso, quindi premi "giù, giù, giù" (passando a 2, 3 e 4) e "su, su, su" (passando a 3, 2, e 1) e vedrai questa uscita:

2 
3 
4 
3 
2 
1 

Ottimo, perfetto. Ma in Firefox, facendo esattamente le stesse cose uscite:

1 
2 
3 
4 
3 
2 

È in ritardo di una voce. Il valore emesso è il precedente, non quello corrente. Questo è un problema.

Qualche idea su come risolverlo?

Answer 1

in Firefox change evento viene generato dopo kepress evento, è possibile utilizzare keyup invece di keypress:

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

http://jsbin.com/ezalav/3