如何在不使用資料庫的情況下根據第一個下拉清單中的選擇自動更新第二個下拉清單中的選項

您有兩個下拉列表，其中選項不是從資料庫中檢索的。第一個下拉清單允許使用者選擇一個類別。第二個下拉清單中的選項取決於第一個下拉清單中的選擇。

例如，如果使用者在第一個下拉清單中選擇First 選項，第二個下拉清單應顯示選項智慧型手機和充電器。如果使用者將其選擇更改為 Second 選項，則第二個下拉清單現在應顯示選項 籃球 和 排球。

不使用資料庫實作

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

function changeSecondDropdown(category) {
const options = {

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

};

//清除第二個下拉選單中的選項
const itemsDropdown = document.getElementById("items ") ;
itemsDropdown.innerHTML = "";

//根據選擇的類別新增選項
const selectedOptions = options[category.value];
for (const option of selectedOptions ) {

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

}
}

}

此實作使用JavaScript 物件來儲存每個專案的選項類別。當使用者變更第一個下拉清單中的選擇時，將呼叫changeSecondDropdown函數，該函數根據所選類別更新第二個下拉清單中的選項。