Comment remplir les listes déroulantes en fonction de la sélection de l'utilisateur ?

Remplir les listes déroulantes en fonction de la sélection

Lors du développement de formulaires avec plusieurs listes déroulantes, il peut être avantageux de remplir les options dans une seule liste déroulante en fonction de la sélection faite dans un autre. Cela permet une expérience plus conviviale en limitant les choix et en rendant la saisie des données plus efficace.

Une approche pour obtenir cette fonctionnalité consiste à utiliser JavaScript pour mettre à jour dynamiquement le contenu de la liste déroulante dépendante. Voici un exemple qui montre comment remplir une liste déroulante (B) en fonction de la sélection dans une autre (A) :

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

Cette fonction JavaScript prend deux paramètres, ddl1 et ddl2, qui représentent les deux listes déroulantes. Il initialise d'abord les tableaux avec les options qui seront affichées dans chaque liste déroulante.

Ensuite, une instruction switch est utilisée pour gérer la sélection effectuée dans ddl1. En fonction de la valeur de ddl1, il efface les options de ddl2 et le remplit avec les options appropriées. La fonction createOption est utilisée pour créer et ajouter chaque option à ddl2.

Dans le HTML, deux listes déroulantes doivent être définies :

<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>

Lorsque l'utilisateur sélectionne une option dans ddl1, le onchange L'événement déclenche la fonction configureDropDownLists, qui met à jour les options dans ddl2 en conséquence. Cette approche offre un moyen pratique de remplir une liste déroulante en fonction de la sélection dans une autre, améliorant ainsi la convivialité des formulaires.

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!