如何在不使用数据库的情况下根据第一个下拉列表中的选择自动更新第二个下拉列表中的选项

您有两个下拉列表，其中选项不是从数据库中检索的。第一个下拉列表允许用户选择一个类别。第二个下拉列表中的选项取决于第一个下拉列表中的选择。

例如，如果用户在第一个下拉列表中选择 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函数，该函数根据所选类别更新第二个下拉列表中的选项。