Comment remplir dynamiquement les options de sélection en JavaScript ?

Remplir dynamiquement les options de sélection

Le code JavaScript donné vise à créer un élément de sélection avec des options allant de 12 à 100. Bien que le code utilise une boucle for, il est ce n'est pas l'approche la plus efficace pour générer un grand nombre d'options.

Code amélioré :

Pour obtenir la fonctionnalité souhaitée, considérez le code optimisé suivant :

<code class="javascript">var min = 12;
var max = 100;
var select = document.getElementById("mainSelect");

for (var i = min; i <= max; i++) {
  var opt = document.createElement("option");
  opt.value = i;
  opt.innerHTML = i;
  select.appendChild(opt);
}</code>

Ce code génère et ajoute dynamiquement des options à l'élément select à l'aide d'une boucle. Il élimine le besoin de créer manuellement des options, ce qui le rend plus efficace.

Améliorations supplémentaires :

1. Fonction générique :

Pour simplifier davantage le processus, vous pouvez créer une fonction réutilisable qui remplit les éléments sélectionnés :

<code class="javascript">function populateSelect(id, min, max) {
  var select = document.getElementById(id);
  for (var i = min; i <= max; i++) {
    var opt = document.createElement("option");
    opt.value = i;
    opt.innerHTML = i;
    select.appendChild(opt);
  }
}</code>

2. Extension du prototype :

Vous pouvez également étendre le prototype HTMLSelectElement pour ajouter une méthode populate :

<code class="javascript">HTMLSelectElement.prototype.populate = function(opts) {
  var settings = {
    min: 0,
    max: settings.min + 100
  };

  for (var userOpt in opts) {
    if (opts.hasOwnProperty(userOpt)) {
      settings[userOpt] = opts[userOpt];
    }
  }

  for (var i = settings.min; i <= settings.max; i++) {
    this.appendChild(new Option(i, i));
  }
};</code>

Avec cette méthode, vous pouvez remplir des éléments sélectionnés tels que :

<code class="javascript">document.getElementById("mainSelect").populate({
  min: 12,
  max: 40
});</code>

Ces approches offrent flexibilité et réutilisabilité dans le remplissage dynamique des options sélectionnées.

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!