Cara menggunakan jQuery untuk melaksanakan kotak drop-down gema

Kotak lungsur sering digunakan dalam halaman web untuk meningkatkan pengalaman pengguna. Dalam sesetengah kes, kita perlu menetapkan kotak lungsur ke keadaan gema, iaitu, apabila halaman dimuat semula, kotak lungsur harus memaparkan nilai yang dipilih sebelum ini. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk melaksanakan kotak drop-down gema.

1. Templat HTML

Pertama, kita perlu menyediakan templat HTML ringkas yang mengandungi kotak lungsur. Tetapkan nilai dan teks untuk setiap pilihan dalam kotak lungsur.

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

2. Tetapkan Kuki

Kami akan menggunakan kuki untuk menyimpan nilai yang dipilih. Kuki ialah fail kecil yang digunakan untuk menyimpan data pelanggan. Kami boleh membaca dan menulis kuki menggunakan objek document.cookie JavaScript.

Berikut ialah fungsi JavaScript yang menetapkan Kuki:

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

Fungsi ini mempunyai tiga parameter, iaitu kunci, nilai dan tamat tempoh. kunci ialah nama kuki, nilai ialah nilai kuki dan tamat tempoh ialah masa tamat tempoh kuki, dalam beberapa hari. Dalam fungsi ini, kami menukar masa tamat tempoh kepada masa UTC dan menulis kuki kepada klien menggunakan objek document.cookie.

3. Dapatkan Kuki

Kami juga perlu menulis fungsi untuk mendapatkan Kuki. Berikut ialah fungsi JavaScript untuk mendapatkan Kuki:

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

Fungsi ini menerima kunci parameter, yang mewakili nama Kuki yang akan diperolehi. Fungsi ini membaca semua kuki dalam document.cookie ke dalam tatasusunan, dan kemudian melintasi tatasusunan untuk mencari kuki yang ditentukan. Jika kuki yang ditentukan ditemui, nilainya dikembalikan.

4. Echo kotak lungsur turun

Kini kita boleh menggunakan jQuery untuk melaksanakan kotak lungsur gema. Tampalkan kod berikut ke dalam JavaScript halaman:

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

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

Dalam kod ini, kami menggunakan kaedah $(document).ready() jQuery untuk menyemak sama ada halaman telah selesai dimuatkan. Jika ya, kami akan membaca nilai pilihan terakhir yang disimpan dalam kuki dan menetapkannya sebagai nilai pilihan kotak lungsur.

Kami juga menggunakan kaedah $("#mySelect").change() jQuery untuk mendengar perubahan dalam kotak lungsur. Apabila nilai kotak lungsur berubah, kami akan mendapat nilai baharu yang dipilih dan menulisnya pada kuki.

Kini, kotak lungsur gema telah lengkap. Apabila halaman dimuat semula, lungsur turun harus memaparkan nilai yang dipilih sebelum ini.

Ringkasan

Artikel ini memperkenalkan cara menggunakan jQuery untuk melaksanakan kotak lungsur turun gema. Kami menggunakan kuki untuk menyimpan nilai yang dipilih dan jQuery untuk membaca dan menulis kuki. Saya harap artikel ini dapat membantu anda melaksanakan kotak drop-down gema dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Cara menggunakan jQuery untuk melaksanakan kotak drop-down gema. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!