最初のドロップダウン メニューでの選択に基づいて 2 番目のドロップダウン メニューのオプションを自動更新する方法

最初のドロップダウン メニューは 2 番目のドロップダウン メニューのオプションを自動更新します

問題ステートメント:

2 つのドロップダウン メニューを開発します。ダウン メニュー。2 番目のドロップダウン メニューのオプションは、最初のドロップダウン メニューでの選択に依存します。この機能はデータベースを利用せずに必要です。

解決策:

初期 HTML:

<code class="html"><select id="category">
  <option value="0">None</option>
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>

<select id="items">
</select></code>

JavaScript:

最初のドロップダウン メニューの変更イベントを処理する関数を定義し、それに応じて 2 番目のドロップダウン メニューのオプションを更新します。

<code class="javascript">document.getElementById("category").addEventListener("change", function() {
  var category = this.value;

  var items = document.getElementById("items");
  items.innerHTML = "";

  switch (category) {
    case "1":
      items.innerHTML = '<option value="3">Smartphone</option><option value="8">Charger</option>';
      break;
    case "2":
      items.innerHTML = '<option value="1">Basketball</option><option value="4">Volleyball</option>';
      break;
    default:
      break;
  }
});</code>

説明:

この例では、2 番目のドロップダウン メニューのオプションが JavaScript 関数内にハードコーディングされています。ユーザーが最初のドロップダウン メニューからカテゴリを選択すると、change イベントによって JavaScript 関数がトリガーされます。選択したカテゴリに基づいて、関数は 2 番目のドロップダウン メニューのオプションを動的に更新します。

以上が最初のドロップダウン メニューでの選択に基づいて 2 番目のドロップダウン メニューのオプションを自動更新する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。