Comment mettre à jour automatiquement les options dans une deuxième liste déroulante en fonction de la sélection dans une première liste déroulante sans utiliser de base de données

Vous avez deux listes déroulantes dans lesquelles les options ne sont pas extraites d'une base de données. La première liste déroulante permet à l'utilisateur de sélectionner une catégorie. Les options de la deuxième liste déroulante dépendent de la sélection effectuée dans la première liste déroulante.

Par exemple, si l'utilisateur choisit l'option Premier dans la première liste déroulante, la deuxième liste déroulante doit afficher les options Smartphone et Chargeur. Si l'utilisateur modifie sa sélection en choisissant l'option Deuxième, la deuxième liste déroulante devrait désormais afficher les options Basketball et Volleyball.

Implémentation sans utiliser de base de données

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

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

};

// Effacez les options dans la deuxième liste déroulante
const itemsDropdown = document.getElementById("items") ;
itemsDropdown.innerHTML = "";

// Ajouter les nouvelles options en fonction de la catégorie sélectionnée
const selectedOptions = options[category.value];
pour (option const de selectedOptions ) {

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

}
}

Cette implémentation utilise un objet JavaScript pour stocker les options de chaque catégorie. Lorsque l'utilisateur modifie la sélection dans la première liste déroulante, la fonction changeSecondDropdown est appelée, qui met à jour les options dans la deuxième liste déroulante en fonction de la catégorie sélectionnée.