Comment remplir une liste déroulante en fonction de la sélection dans une autre à l'aide de JavaScript ?

Remplir une liste déroulante en fonction de la sélection dans une autre à l'aide de JavaScript

Lorsque nous sommes confrontés à la tâche de mettre à jour dynamiquement les options dans une liste déroulante en fonction de la sélection effectuée dans une autre, il est essentiel pour éviter les complexités inutiles telles que les requêtes de base de données. Explorons une solution simple basée sur JavaScript qui accomplit cela sans avoir besoin d'appels AJAX.

Pour illustrer cette approche, considérons un scénario dans lequel vous disposez de deux listes déroulantes : la liste déroulante A avec des options telles que "Couleurs", " Formes", "Noms" et la liste déroulante B. Nous souhaitons remplir les options de la liste déroulante B en fonction de la sélection effectuée dans la liste déroulante A.

Exemple de code

La fonction JavaScript suivante montre comment obtenir cette fonctionnalité :

<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);
}

Marquage HTML

Le balisage HTML suivant comprend deux listes déroulantes :

<code class="html"><select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
  <option value=""></option>
  <option value="Colours">Colours</option>
  <option value="Shapes">Shapes</option>
  <option value="Names">Names</option>
</select>

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

Utilisation

Pour utiliser cette fonctionnalité , appelez simplement la fonction configureDropDownLists, en passant la première liste déroulante (ddl1) et la deuxième liste déroulante (ddl2) comme arguments. La fonction gérera le remplissage dynamique du menu déroulant B en fonction de la sélection effectuée dans le menu déroulant A.

Cet extrait de code démontre une solution de travail complète, vous permettant de remplir dynamiquement une liste déroulante en fonction de la sélection effectuée dans une autre à l'aide de JavaScript. , sans avoir besoin d'appels à la base de données ou de requêtes AJAX.

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!