데이터베이스를 사용하지 않고 첫 번째 드롭다운의 선택 항목을 기반으로 두 번째 드롭다운의 옵션을 자동으로 업데이트하는 방법

두 개의 드롭다운이 있습니다. 옵션은 데이터베이스에서 검색되지 않습니다. 첫 번째 드롭다운에서는 사용자가 카테고리를 선택할 수 있습니다. 두 번째 드롭다운의 옵션은 첫 번째 드롭다운의 선택 사항에 따라 달라집니다.

예를 들어 사용자가 첫 번째 드롭다운에서 첫 번째 옵션을 선택하면 두 번째 드롭다운에 스마트폰 및 충전기. 사용자가 선택 항목을 두 번째 옵션으로 변경하면 이제 두 번째 드롭다운에 농구 및 배구.

옵션이 표시됩니다. 데이터베이스를 사용하지 않고 구현

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

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

};

// 두 번째 드롭다운에서 옵션 지우기
const itemsDropdown = document.getElementById("items") ;
itemsDropdown.innerHTML = "";

// 선택한 카테고리를 기반으로 새 옵션 추가
const selectedOptions = 옵션[category.value];
for (selectedOptions의 const 옵션 ) {

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

}
}

이 구현에서는 JavaScript 개체를 사용하여 각 항목에 대한 옵션을 저장합니다. 범주. 사용자가 첫 번째 드롭다운에서 선택 항목을 변경하면 선택된 카테고리에 따라 두 번째 드롭다운의 옵션을 업데이트하는changeSecondDropdown 함수가 호출됩니다.