Comment mettre à jour automatiquement les options dans un deuxième menu déroulant en fonction des sélections dans le premier menu déroulant ?

Le premier menu déroulant met à jour automatiquement les options dans le deuxième menu déroulant

Énoncé du problème :

Développer deux drop- menus déroulants où les options du deuxième menu déroulant dépendent de la sélection effectuée dans le premier menu déroulant. Cette fonctionnalité est souhaitée sans utiliser de base de données.

Solution :

HTML initial :

<code class="html"><select id="category">
  <option value="0">None</option>
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>

<select id="items">
</select></code>

JavaScript :

Définissez une fonction pour gérer l'événement de changement du premier menu déroulant et mettez à jour les options du deuxième menu déroulant en conséquence.

<code class="javascript">document.getElementById("category").addEventListener("change", function() {
  var category = this.value;

  var items = document.getElementById("items");
  items.innerHTML = "";

  switch (category) {
    case "1":
      items.innerHTML = '<option value="3">Smartphone</option><option value="8">Charger</option>';
      break;
    case "2":
      items.innerHTML = '<option value="1">Basketball</option><option value="4">Volleyball</option>';
      break;
    default:
      break;
  }
});</code>

Explication :

Dans cet exemple, les options du deuxième menu déroulant sont codées en dur dans la fonction JavaScript. Lorsque l'utilisateur sélectionne une catégorie dans le premier menu déroulant, l'événement de changement déclenche la fonction JavaScript. En fonction de la catégorie sélectionnée, la fonction met à jour dynamiquement les options dans le deuxième menu déroulant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!