jQuery を使用してエコー ドロップダウン ボックスを実装する方法

ドロップダウン ボックスは、ユーザー エクスペリエンスを向上させるために Web ページでよく使用されます。場合によっては、ドロップダウン ボックスをエコー状態に設定する必要があります。つまり、ページがリロードされると、ドロップダウン ボックスには以前に選択した値が表示されます。この記事では、jQuery を使用してエコー ドロップダウン ボックスを実装する方法を紹介します。

1. HTML テンプレート

まず、ドロップダウン ボックスを含む単純な HTML テンプレートを準備する必要があります。ドロップダウン ボックスの各オプションの値とテキストを設定します。

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

2. Cookie の設定

Cookie を使用して、選択した値を保存します。 Cookie は、クライアント データを保存するために使用される小さなファイルです。 JavaScript の document.cookie オブジェクトを使用して Cookie を読み書きできます。

次は、Cookie を設定する JavaScript 関数です:

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

この関数には、キー、値、有効期限という 3 つのパラメーターがあります。 key は Cookie の名前、value は Cookie の値、expires は Cookie の有効期限 (日数) です。この関数では、有効期限を UTC 時間に変換し、document.cookie オブジェクトを使用してクライアントに Cookie を書き込みます。

3. Get Cookie

Cookie を取得する関数を記述する必要もあります。以下は Cookie を取得する JavaScript 関数です。

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

この関数は、取得する Cookie の名前を表すパラメーター キーを受け取ります。この関数は、document.cookie 内のすべての Cookie を配列に読み取り、配列を走査して指定された Cookie を見つけます。指定された Cookie が見つかった場合は、その値が返されます。

4. ドロップダウン ボックスをエコーする

jQuery を使用して、エコー ドロップダウン ボックスを実装できます。次のコードをページの JavaScript に貼り付けます。

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

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

このコードでは、jQuery の $(document).ready() メソッドを使用して、ページの読み込みが完了したかどうかを確認します。その場合、Cookie に保存されている最後に選択された値を読み取り、それをドロップダウン ボックスの選択された値として設定します。

また、jQuery の $("#mySelect").change() メソッドを使用して、ドロップダウン ボックスの変更をリッスンします。ドロップダウン ボックスの値が変更されると、新しく選択された値が取得され、Cookie に書き込まれます。

これで、エコー ドロップダウン ボックスが完成しました。ページがリロードされると、ドロップダウンには以前に選択した値が表示されます。

概要

この記事では、jQuery を使用してエコー ドロップダウン ボックスを実装する方法を紹介します。選択した値の保存には Cookie を使用し、Cookie の読み取りと書き込みには jQuery を使用しました。この記事が、エコー ドロップダウン ボックスの実装とユーザー エクスペリエンスの向上に役立つことを願っています。

以上がjQuery を使用してエコー ドロップダウン ボックスを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。