Comment remplir dynamiquement une liste déroulante basée sur la sélection sans requêtes de base de données ?

Remplir dynamiquement la liste déroulante en fonction de la sélection

Lorsque vous êtes confronté à la tâche de modifier le contenu d'une liste déroulante en fonction de la sélection effectuée dans une autre, comprendre comment implémenter cette fonctionnalité avec JavaScript est crucial. Contrairement aux situations qui nécessitent des requêtes de base de données, ce processus peut être simplifié sans utiliser AJAX.

Pour vous aider, nous fournissons un exemple de code JavaScript concis et efficace qui montre comment remplir la deuxième liste déroulante (Dropdown B) en fonction sur la sélection effectuée dans la première liste déroulante (Dropdown A). Ce code n'implique aucune récupération de données externes ni requêtes de base de données :

<code class="javascript">function configureDropDownLists(ddl1, ddl2) {
  var colours = ['Black', 'White', 'Blue'];
  var shapes = ['Square', 'Circle', 'Triangle'];
  var names = ['John', 'David', 'Sarah'];

  switch (ddl1.value) {
    case 'Colours':
      ddl2.options.length = 0;
      for (i = 0; i < colours.length; i++) {
        createOption(ddl2, colours[i], colours[i]);
      }
      break;
    case 'Shapes':
      ddl2.options.length = 0;
      for (i = 0; i < shapes.length; i++) {
        createOption(ddl2, shapes[i], shapes[i]);
      }
      break;
    case 'Names':
      ddl2.options.length = 0;
      for (i = 0; i < names.length; i++) {
        createOption(ddl2, names[i], names[i]);
      }
      break;
    default:
      ddl2.options.length = 0;
      break;
  }
}

function createOption(ddl, text, value) {
  var opt = document.createElement('option');
  opt.value = value;
  opt.text = text;
  ddl.options.add(opt);
}</code>

Dans ce code, nous avons défini trois tableaux (couleurs, formes et noms) contenant les valeurs qui doivent être affichées dans la liste déroulante B pour chaque option correspondante dans le menu déroulant A.

Lorsqu'un utilisateur sélectionne une option dans le menu déroulant A, la fonction configureDropDownLists est appelée. En fonction de l'option sélectionnée, la fonction efface le contenu du menu déroulant B et le remplit à nouveau avec les valeurs appropriées du tableau concerné.

Vous pouvez implémenter ce code en créant deux listes déroulantes dans votre document HTML et en utilisant l'événement onchange gestionnaire sur la première liste déroulante pour déclencher la fonction qui remplit la deuxième liste déroulante.

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!