Maison > interface Web > js tutoriel > le corps du texte

Comment obtenir la valeur précédente d'une liste déroulante de sélection avant qu'elle ne change ?

Susan Sarandon
Libérer: 2024-11-13 09:44:02
original
631 Les gens l'ont consulté

How to Get the Previous Value of a Select Dropdown Before It Changes?

Récupération de la valeur d'une liste déroulante de sélection avant modification

Dans le développement Web, il est souvent nécessaire de capturer la valeur d'une liste déroulante de sélection avant qu'elle ne change. Cependant, le gestionnaire d'événements « change » typique récupère la valeur une fois la modification effectuée.

Considérez l'extrait HTML suivant :

<select name="test">
  <option value="stack">Stack</option>
  <option value="overflow">Overflow</option>
  <option value="my">My</option>
  <option value="question">Question</option>
</select>
Copier après la connexion

Si l'option « Mon » est actuellement sélectionnée et que l'option l'utilisateur le change en "Stack", la valeur renvoyée par le gestionnaire d'événements "change" sera "Stack".

Pour récupérer la valeur précédente avant le changement, une solution intelligente peut être utilisée en utilisant une combinaison des Événements 'focus' et 'change' :

(function () {
  var previous;

  $("select").on('focus', function () {
    // Store the current value on focus and on change
    previous = this.value;
  }).change(function() {
    // Do something with the previous value after the change
    alert(previous);

    // Make sure the previous value is updated
    previous = this.value;
  });
})();
Copier après la connexion

Lorsque l'utilisateur se concentre sur la liste déroulante, l'événement 'focus' se déclenche et stocke la valeur actuelle dans la variable 'précédente'. Par la suite, lorsque l'utilisateur modifie la sélection, l'événement « changement » se déclenche et alerte la valeur précédente stockée dans « précédent ».

Cette approche garantit que la valeur avant la modification est facilement disponible pour le traitement, offrant une plus grande flexibilité. dans la gestion efficace des modifications de la liste déroulante.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal