Como atualizar automaticamente opções em um segundo menu suspenso com base na seleção em um primeiro menu suspenso sem usar um banco de dados

Você tem dois menus suspensos onde as opções não são recuperadas de um banco de dados. O primeiro menu suspenso permite ao usuário selecionar uma categoria. As opções no segundo menu suspenso dependem da seleção no primeiro menu suspenso.

Por exemplo, se o usuário escolher a opção Primeira no primeiro menu suspenso, o segundo menu suspenso deverá exibir as opções Smartphone e Carregador. Se o usuário alterar sua seleção para a opção Segundo, o segundo menu suspenso agora deverá exibir as opções Basquete e Vôlei.

Implementação sem usar um banco de dados

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

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

};

// Limpe as opções no segundo menu suspenso
const itemsDropdown = document.getElementById("items") ;
itemsDropdown.innerHTML = "";

// Adicione as novas opções com base na categoria selecionada
const selectedOptions = options[category.value];
for (const option of selectedOptions ) {

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

}
}

Esta implementação usa um objeto JavaScript para armazenar as opções para cada categoria. Quando o usuário altera a seleção no primeiro menu suspenso, a função changeSecondDropdown é chamada, que atualiza as opções no segundo menu suspenso com base na categoria selecionada.