データベースを使用せずに最初のドロップダウンでの選択に基づいて 2 番目のドロップダウンのオプションを自動的に更新する方法

ドロップダウンが 2 つあります。オプションはデータベースから取得されません。最初のドロップダウンでは、ユーザーはカテゴリを選択できます。 2 番目のドロップダウンのオプションは、最初のドロップダウンでの選択によって異なります。

たとえば、ユーザーが最初のドロップダウンで First オプションを選択した場合、2 番目のドロップダウンにはオプション スマートフォンと充電器。ユーザーが選択を Second オプションに変更すると、2 番目のドロップダウンにはオプション バスケットボール および バレーボール が表示されます。

データベースを使用しない実装

<option value="0">None</option>
<option value="1">First</option>
<option value="2">Second</option>

"1": ["Smartphone", "Charger"],
"2": ["Basketball", "Volleyball"]

};

// 2 番目のドロップダウンのオプションをクリアします
const itemsDropdown = document.getElementById("items") ;
itemsDropdown.innerHTML = "";

// 選択したカテゴリに基づいて新しいオプションを追加します
const selectedOptions = options[category.value];
for (selectedOptions の const オプション) {

const newOption = document.createElement("option");
newOption.value = option;
newOption.textContent = option;
itemsDropdown.appendChild(newOption);

}
}

この実装では、JavaScript オブジェクトを使用してそれぞれのオプションを保存しますカテゴリ。ユーザーが最初のドロップダウンの選択を変更すると、changeSecondDropdown 関数が呼び出され、選択したカテゴリに基づいて 2 番目のドロップダウンのオプションが更新されます。