如何在沒有資料庫的情況下根據第一個下拉選擇自動更新下拉選項？

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

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

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

不使用資料庫實作

<select name="category" onchange="changeSecondDropdown(this)"><pre class="brush:php;toolbar:false"><option value="0">None</option>
<option value="1">First</option>
<option value="2">Second</option>

<script><br>function changeSecondDropdown(category) {<br> const options = {</script>

"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函數，該函數根據所選類別更新第二個下拉清單中的選項。

以上是如何在沒有資料庫的情況下根據第一個下拉選擇自動更新下拉選項？的詳細內容。更多資訊請關注PHP中文網其他相關文章！