So implementieren Sie mit jQuery ein Echo-Dropdown-Feld

Dropdown-Boxen werden häufig auf Webseiten verwendet, um die Benutzererfahrung zu verbessern. In einigen Fällen müssen wir das Dropdown-Feld auf den Echo-Status setzen, d. h. beim erneuten Laden der Seite sollte das Dropdown-Feld den zuvor ausgewählten Wert anzeigen. In diesem Artikel wird erläutert, wie Sie mit jQuery ein Echo-Dropdown-Feld implementieren.

1. HTML-Vorlage

Zuerst müssen wir eine einfache HTML-Vorlage vorbereiten, die ein Dropdown-Feld enthält. Legen Sie den Wert und den Text für jede Option im Dropdown-Feld fest.

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

2. Cookie setzen

Wir verwenden Cookies, um den ausgewählten Wert zu speichern. Ein Cookie ist eine kleine Datei, die zum Speichern von Kundendaten verwendet wird. Wir können Cookies mit dem document.cookie-Objekt von JavaScript lesen und schreiben.

Das Folgende ist eine JavaScript-Funktion, die Cookies setzt:

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;
}

Diese Funktion hat drei Parameter, nämlich Schlüssel, Wert und Ablaufdatum. „key“ ist der Name des Cookies, „value“ der Wert des Cookies und „expires“ die Ablaufzeit des Cookies in Tagen. In dieser Funktion konvertieren wir die Ablaufzeit in UTC-Zeit und schreiben das Cookie mithilfe des document.cookie-Objekts an den Client.

3. Cookie abrufen

Wir müssen auch eine Funktion schreiben, um Cookie abzurufen. Das Folgende ist die JavaScript-Funktion zum Abrufen von Cookies:

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 "";
}

Diese Funktion empfängt einen Parameterschlüssel, der den Namen des abzurufenden Cookies darstellt. Die Funktion liest alle Cookies in document.cookie in ein Array und durchläuft dann das Array, um das angegebene Cookie zu finden. Wenn das angegebene Cookie gefunden wird, wird sein Wert zurückgegeben.

4. Echo das Dropdown-Feld

Jetzt können wir jQuery verwenden, um das Echo-Dropdown-Feld zu implementieren. Fügen Sie den folgenden Code in das JavaScript der Seite ein:

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

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

In diesem Code verwenden wir die Methode $(document).ready() von jQuery, um zu überprüfen, ob der Ladevorgang der Seite abgeschlossen ist. Wenn ja, lesen wir den zuletzt im Cookie gespeicherten ausgewählten Wert und legen ihn als ausgewählten Wert der Dropdown-Box fest.

Wir verwenden auch die Methode $("#mySelect").change() von jQuery, um auf Änderungen im Dropdown-Feld zu warten. Wenn sich der Wert des Dropdown-Felds ändert, erhalten wir den neu ausgewählten Wert und schreiben ihn in das Cookie.

Jetzt ist das Echo-Dropdown-Feld fertig. Wenn die Seite neu geladen wird, sollte das Dropdown-Menü den zuvor ausgewählten Wert anzeigen.

Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mit jQuery ein Echo-Dropdown-Feld implementieren. Wir haben Cookies zum Speichern des ausgewählten Werts und jQuery zum Lesen und Schreiben von Cookies verwendet. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, Echo-Dropdown-Boxen zu implementieren und die Benutzererfahrung zu verbessern.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit jQuery ein Echo-Dropdown-Feld. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!