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

DDD
發布: 2024-10-21 06:48:29
原創
845 人瀏覽過

How to Update Dropdown Options Automatically Based on First Dropdown Selection Without a Database?

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

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

例如,如果使用者在第一個下拉清單中選擇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中文網其他相關文章!

來源:php
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板