Comment utiliser jQuery pour implémenter une liste déroulante d'écho

Les listes déroulantes sont souvent utilisées dans les pages Web pour améliorer l'expérience utilisateur. Dans certains cas, nous devons définir la liste déroulante sur l'état d'écho, c'est-à-dire que lorsque la page est rechargée, la liste déroulante doit afficher la valeur précédemment sélectionnée. Cet article explique comment utiliser jQuery pour implémenter une liste déroulante d'écho.

1. Modèle HTML

Tout d'abord, nous devons préparer un modèle HTML simple contenant une liste déroulante. Définissez la valeur et le texte de chaque option dans la liste déroulante.

<select id="mySelect">
  <option value="1">选项一</option>
  <option value="2">选项二</option>
  <option value="3">选项三</option>
  <option value="4">选项四</option>
</select>

2. Set Cookie

Nous utiliserons des cookies pour stocker la valeur sélectionnée. Un cookie est un petit fichier utilisé pour stocker les données du client. Nous pouvons lire et écrire des cookies à l'aide de l'objet document.cookie de JavaScript.

Ce qui suit est une fonction JavaScript qui définit Cookie :

function setCookie(key, value, expires) {
  var date = new Date();
  date.setTime(date.getTime() + expires * 24 * 60 * 60 * 1000);
  var expires = "expires=" + date.toUTCString();
  document.cookie = key + "=" + value + "; " + expires;
}

Cette fonction a trois paramètres, à savoir la clé, la valeur et expire. key est le nom du cookie, value est la valeur du cookie et expires est le délai d'expiration du cookie, en jours. Dans cette fonction, nous convertissons l'heure d'expiration en heure UTC et écrivons le cookie au client à l'aide de l'objet document.cookie.

3. Get Cookie

Nous devons également écrire une fonction pour obtenir Cookie. Voici la fonction JavaScript pour obtenir le Cookie :

function getCookie(key) {
  var cookies = document.cookie.split("; ");
  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].split("=");
    if (cookie[0] == key) {
      return cookie[1];
    }
  }
  return "";
}

Cette fonction reçoit une clé de paramètre, qui représente le nom du Cookie à obtenir. La fonction lit tous les cookies de document.cookie dans un tableau, puis parcourt le tableau pour trouver le cookie spécifié. Si le cookie spécifié est trouvé, sa valeur est renvoyée.

4. Écho de la liste déroulante

Nous pouvons maintenant utiliser jQuery pour implémenter la liste déroulante d'écho. Collez le code suivant dans le JavaScript de la page :

$(document).ready(function() {
  var selectedValue = getCookie("selectedValue");
  $("#mySelect").val(selectedValue);
});

$("#mySelect").change(function() {
  var selectedValue = $(this).val();
  setCookie("selectedValue", selectedValue, 365);
});

Dans ce code, nous utilisons la méthode $(document).ready() de jQuery pour vérifier si la page a fini de se charger. Si tel est le cas, nous lirons la dernière valeur sélectionnée stockée dans le cookie et la définirons comme valeur sélectionnée dans la liste déroulante.

Nous utilisons également la méthode $("#mySelect").change() de jQuery pour écouter les modifications dans la liste déroulante. Lorsque la valeur de la liste déroulante change, nous obtiendrons la nouvelle valeur sélectionnée et l'écrirons dans le cookie.

Maintenant, la liste déroulante d'écho est complétée. Lorsque la page se recharge, la liste déroulante doit afficher la valeur précédemment sélectionnée.

Résumé

Cet article explique comment utiliser jQuery pour implémenter une liste déroulante d'écho. Nous avons utilisé des cookies pour stocker la valeur sélectionnée et jQuery pour lire et écrire des cookies. J'espère que cet article pourra vous aider à implémenter des listes déroulantes d'écho et à améliorer l'expérience utilisateur.

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!