Handhabung der Tastatur in der Dropdown-Liste

Question

Ich konvertiere Werte basierend auf Einheiten (km zu m, lb zu g, etc). Ich habe es funktioniert, bis auf einen Fehler, den ich nicht lösen kann.

Hier ist die Funktion, die die Ereignisse verarbeitet (Konvertierung in einem jQuery-Plug-in geschieht):

function unitConversion() { 
    var from; 

    // Remember which unit was selected in the drop down list. 
    $('select.unit').live('click', function() { 
     from = $(this).find('option:selected').text(); 
    }); 

    // Now handle the conversion. 
    $('select.unit').live('change', function() { 
     // Get the from and to values. 
     // var from = $(this).prev().find('option:selected').text(); 
     var to = $(this).find('option:selected').text(); 

     // Change the text for each field that corresponds with this component. 
     var textBoxes = $(this).closest('div.data-group').find('input:text'); 
     textBoxes.each(function() { 
      var curValue = $(this).val(); 
      $(this).val($(this).unitConvert({ 
       value: curValue, 
       from: from, 
       to: to 
      })); 
     }); 
    }); 
} 

Dies funktioniert gut (obwohl, wenn Sie diesen Code keine Verbesserungen haben, bin ich immer wiling zu lernen). Das ursprüngliche Problem, das ich hatte, war jedoch, dass ich mich an die vorherige ausgewählte Einheit in der Dropdown-Liste erinnern musste. Daher das "Klick" -Ereignis, das ich mache.

Diese Lösung funktioniert gut ... solange die Person die Maus verwendet. Wenn ich jedoch mit der Tastatur auf die Dropdown-Liste klicke und die Pfeiltasten nach oben/unten drücke, passiert nichts. Ich habe die verschiedenen Schlüssel * Ereignisse ausprobiert, und diese scheinen auch nicht zu funktionieren. Was soll ich hier tun, um Tastatur und Maus-Eingabe zu behandeln?

(war meine Hoffnung, dass das Änderungsereignis mir das zuvor ausgewählte Element zuzugreifen erlauben würde, aber das scheint nicht der Fall zu sein.)

aktualisieren: ich einige zusätzliche Erläuterungen schaffen wollte.

Wenn ich das Fokusereignis verwende, werden die Konvertierungen irgendwie komisch. Der Grund dafür ist, dass ich den "from" -Wert nur beim ersten Mal setze, wenn ich den Fokus bekomme. Wenn ich möchte, dass die Konvertierung jedes Mal korrekt erfolgt, muss ich den Fokus auf die Dropdown-Liste verlieren und den Prozess dann überarbeiten. Nicht sehr nützlich.

Wenn ich aus irgendeinem Grund in das Feld klicke und dann auf die Pfeile nach oben und unten klicke, wird das Änderungsereignis nicht ausgelöst. Ich habe wirklich keine Ahnung, warum das so ist ...

Answer 1

würde ich zwei Änderungen am Code vornehmen.

Zuerst stellen Sie sicher, Ihre Möglichkeiten haben sowohl text und value:

<select> 
    <option value="km">KM</option> 
    ... 
</select> 

Dann statt $('select.unit').find('option:selected').text(); tun Sie können einfach schreiben:

$('select.unit').val(); 

Dies ist auch richtig, wie Sie anderen Text zeigen auf den Wert, zum Beispiel "Kilometer" dem Benutzer anzeigen, aber immer noch den Wert als "km" haben, um mit dem Plugin zu arbeiten.

nun auf das eigentliche Problem ...

Der einfachste Weg zu „erinnern“ früheren Zustand ist selbst Daten an das Element zu befestigen. Der beste Weg dies zu tun, während Speicherlecks und alle möglichen anderen Probleme vermieden werden, ist die Verwendung von jQuerys data(). Geben Sie ihm einfach einen Namen und einen Wert, und er wird sich an das ausgewählte Element Ihrer Wahl erinnern.

// Now handle the conversion. 
$('select.unit').live('change', function() { 
    // Get the from and to values. 
    var from = $(this).data("from"); 
    var to = $(this).val(); 

    // Remember the from value for next time 
    $(this).data("from", to); 

    // Change the text for each field that corresponds with this component. 
    var textBoxes = $(this).closest('div.data-group').find('input:text'); 
    textBoxes.each(function() { 
     var curValue = $(this).val(); 
     $(this).val($(this).unitConvert({ 
      value: curValue, 
      from: from, 
      to: to 
     })); 
    }); 
}); 

die gleiche Methode verwenden die von Wert auf Dokument Last einstellen (falls erforderlich):

$(function() { 
    $('select.unit').each(function() { 
     $(this).data("from", $(this).val()); 
    }); 
}); 

Answer 2

Anstatt auf eine click zu hören, sollten Sie nur nach einer focus Ausschau halten. Das sollte sowohl für die Maus als auch für die Tastatur funktionieren.

Answer 3

Keine Notwendigkeit, in zusätzlicher Veranstaltung .. Sie globale Variable hinzufügen können (außerhalb der Funktion) _from genannt, initialisieren sie mit dem gewählten Wert in dem Dokument dann bereit Ereignis _from gleich zu to sein, nachdem Sie es Verarbeitung fertig.

Auf diese Weise wird _from immer den zuvor ausgewählten Wert der Dropdown-Liste enthalten.

Codebeispiel:

var _prevSelectedValues = new Array(); 
$(function() { 
    $("select").each(function(index) { 
     _prevSelectedValues[$(this).attr("id")] = $(this).val(); 
     $(this).change(function() { 
      var id = $(this).attr("id"); 
      alert("prev: " + _prevSelectedValues[id] + ", current: " + $(this).val()); 
      _prevSelectedValues[id] = $(this).val(); 
     }); 
    }); 
}); 

Testfall: http://jsfiddle.net/TuHnB/