<select>
Was ich erreichen möchte, ist, wann immer das Dropdown geändert wird, ich möchte den Wert des Dropdowns vor dem Ändern. Ich verwende die Version 1.3.2 von jQuery und das Ereignis on change, aber der Wert, den ich dort erhalte, ist nach der Änderung.
<select name="test">
<option value="stack">Stack</option>
<option value="overflow">Overflow</option>
<option value="my">My</option>
<option value="question">Question</option>
</select>
Nehmen wir an, die aktuelle Option My ist jetzt ausgewählt, wenn ich sie im Ereignis onchange in Stack ändere (dh wenn ich sie in Stack geändert habe). Ich möchte den vorherigen Wert, dh meinen erwarteten Wert in diesem Fall.
Wie kann dies erreicht werden?
Bearbeiten: In meinem Fall habe ich mehrere Auswahlfelder auf derselben Seite und möchte, dass auf alle dasselbe angewendet wird. Außerdem werden alle meine Auswahlen nach dem Laden der Seite über Ajax eingefügt.
javascript
jquery
jquery-events
Alpesh
quelle
quelle
Antworten:
Kombinieren Sie den Fokus - Ereignis mit dem Änderungsereignis zu erreichen , was Sie wollen:
Arbeitsbeispiel: http://jsfiddle.net/x5PKf/766
quelle
$(this).blur();
am Ende der ÄnderungsfunktionBitte verwenden Sie hierfür keine globale Variable. Speichern Sie den vorherigen Wert in den Daten. Dies ist ein Beispiel: http://jsbin.com/uqupu3/2/edit
der Code für ref:
Ich habe gerade gesehen, dass Sie viele Auswahlen auf der Seite haben. Dieser Ansatz funktioniert auch für Sie, da Sie für jede Auswahl den vorherigen Wert in den Daten der Auswahl speichern
quelle
jQuery.data
sowieso.select
! Die akzeptierte Antwort wird unterbrochen, da sie mit allen übereinstimmt,select
aber nur den Wert der ersten speichert.data
ist der bessere Weg, es zu tun. +1 :)Ich entscheide mich für die Lösung von Avi Pinto, die verwendet
jquery.data()
Die Verwendung von Fokus ist keine gültige Lösung. Es funktioniert beim ersten Ändern der Optionen. Wenn Sie jedoch bei diesem Auswahlelement bleiben und die Taste "Auf" oder "Ab" drücken. Das Fokusereignis wird nicht erneut durchlaufen.
Die Lösung sollte also wie folgt aussehen:
quelle
var $selectStatus = $('.my-select'); $selectStatus.on('change', function () { var newStatus = $(this).val(); var oldStatus = $(this).data('pre'); }).data('pre', $selectStatus.val());
$('mySelect').data('pre', $(this).val());
Es sollte lauten:$('mySelect').each(function() { $(this).data('pre', $(this).val()); });
Ich habe nicht genug Ruf, um die Antwort zu bearbeiten: /Verfolgen Sie den Wert von Hand.
quelle
quelle
Ich verwende das Ereignis "live", meine Lösung ähnelt im Wesentlichen Dimitiar, aber anstatt "focus" zu verwenden, wird mein vorheriger Wert gespeichert, wenn "click" ausgelöst wird.
quelle
Behalten Sie den aktuell ausgewählten Dropdown-Wert mit der ausgewählten Abfrage in einer globalen Variablen bei, bevor Sie die Dropdown-Aktionsfunktion "Bei Änderung" schreiben. Wenn Sie den vorherigen Wert in der Funktion festlegen möchten, können Sie die globale Variable verwenden.
quelle
Wie wäre es mit einem benutzerdefinierten jQuery-Ereignis mit einer eckigen Überwachungsschnittstelle?
quelle
Ich weiß, dass dies ein alter Thread ist, dachte aber, ich könnte ein kleines Extra hinzufügen. In meinem Fall wollte ich den Text, val und einige andere Daten attr weitergeben. In diesem Fall ist es besser, die gesamte Option als vorherigen Wert zu speichern, als nur den Wert.
Beispielcode unten:
BEARBEITEN:
Ich habe vergessen, .clone () zum Element hinzuzufügen. Wenn Sie dies nicht tun, wenn Sie versuchen, die Werte zurückzuziehen, ziehen Sie am Ende die neue Kopie der Auswahl und nicht die vorherige. Bei Verwendung der Methode clone () wird eine Kopie der Auswahl anstelle einer Instanz davon gespeichert.
quelle
Warum speichern Sie nicht den aktuell ausgewählten Wert, und wenn das ausgewählte Element geändert wird, wird der alte Wert gespeichert? (und Sie können es erneut aktualisieren, wie Sie möchten)
quelle
Verwenden Sie folgenden Code, ich habe es getestet und es funktioniert
quelle
quelle
Ich möchte eine weitere Option zur Lösung dieses Problems beitragen. da die oben vorgeschlagenen Lösungen mein Szenario nicht gelöst haben.
Dies verwendet jQuery, so dass def. ist hier eine Abhängigkeit, aber diese kann angepasst werden, um in reinem Javascript zu arbeiten. (Fügen Sie dem Body einen Listener hinzu, prüfen Sie, ob das ursprüngliche Ziel eine Auswahl war, führen Sie die Funktion aus, ...).
Wenn Sie den Änderungs-Listener an den Body anhängen, können Sie ziemlich sicher sein, dass dieser nach bestimmten Listenern für die Auswahl ausgelöst wird. Andernfalls wird der Wert von 'data-previous' überschrieben, bevor Sie ihn überhaupt lesen können.
Dies setzt natürlich voraus, dass Sie es vorziehen, separate Listener für Ihren Set-Prior- und Check-Wert zu verwenden. Es passt genau zum Muster der Einzelverantwortung.
Hinweis: Dadurch wird allen ausgewählten Optionen diese 'vorherige' Funktionalität hinzugefügt. Passen Sie daher die Selektoren bei Bedarf genau an.
quelle
Dies ist eine Verbesserung der Antwort von @thisisboris. Es fügt Daten einen aktuellen Wert hinzu, sodass der Code steuern kann, wann eine auf den aktuellen Wert festgelegte Variable geändert wird.
quelle
Beste Lösung:
quelle
Es gibt verschiedene Möglichkeiten, um das gewünschte Ergebnis zu erzielen. Dies ist meine bescheidene Vorgehensweise:
Lassen Sie das Element seinen vorherigen Wert behalten, und fügen Sie ein Attribut 'previousValue' hinzu.
Nach der Initialisierung kann 'previousValue' jetzt als Attribut verwendet werden. Um in JS auf den vorherigen Wert dieser Option zuzugreifen, wählen Sie:
Nachdem Sie 'previousValue' verwendet haben, aktualisieren Sie das Attribut auf den aktuellen Wert.
quelle
Ich musste ein anderes Div basierend auf der Auswahl enthüllen
So können Sie es mit jquery und es6-Syntax machen
HTML
JS
quelle