Comment remplir dynamiquement le contenu des listes déroulantes à l'aide de JavaScript ?

Population dynamique de la liste déroulante via Javascript

Dans un scénario où vous devez remplir le contenu d'une liste déroulante (B) en fonction de la sélection effectuée dans une autre liste déroulante (A) utilisant JavaScript, vous n'avez pas besoin de requêtes AJAX complexes. Au lieu de cela, vous pouvez exploiter l'extrait de code suivant pour y parvenir :

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

Pour utiliser ce code, incluez-le dans votre fichier JavaScript et enregistrez la fonction configureDropDownLists en tant que gestionnaire d'événements onChange pour votre première liste déroulante (A). :

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

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

Ce code montre comment remplir la deuxième liste déroulante (ddl2) en fonction de la sélection dans la première liste déroulante (ddl1), en utilisant la logique de changement de casse pour déterminer dynamiquement le contenu de ddl2.

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!