Ajouter des options à sélectionner avec javascript

Question

Je veux que ce javascript crée des options de 12 à 100 dans un select avec l'id "mainSelect", car je ne veux pas créer manuellement tous les tags d'option. Pouvez-vous me donner quelques indications ? Merci

function selectOptionCreate() {

  var age = 88;
  line = "";
  for (var i = 0; i < 90; i++) {
    line += "";
    line += age + i;
    line += "";
  }

  return line;
}

Answer 1

Vous pouvez y parvenir avec une simple boucle for :

var min = 12,
    max = 100,
    select = document.getElementById('selectElementId');

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

Démo JS Fiddle.

Comparaison JS Perf des deux réponses, la mienne et celle de Sime Vidas, exécutée car je trouvais la sienne un peu plus compréhensible/intuitive que la mienne et je me demandais comment cela se traduirait dans l'implémentation. Selon Chromium 14/Ubuntu 11.04, la mienne est légèrement plus rapide, cependant d'autres navigateurs/plateformes sont susceptibles d'avoir des résultats différents.

---

Édité en réponse au commentaire de l'OP :

Comment puis-je appliquer ceci à plus d'un élément ?

function populateSelect(cible, min, max){
    if (!cible){
        return false;
    }
    else {
        var min = min || 0,
            max = max || min + 100;

        select = document.getElementById(cible);

        for (var i = min; i<=max; i++){
            var opt = document.createElement('option');
            opt.value = i;
            opt.innerHTML = i;
            select.appendChild(opt);
        }
    }
}
// appel de la fonction avec tous les trois valeurs :
populateSelect('selectElementId',12,100);

// appel de la fonction avec seulement l'« id » (« min » et « max » sont définis par défaut) :
populateSelect('anotherSelect');

// appel de la fonction avec l'« id » et le « min » (le « max » est défini par défaut) :
populateSelect('moreSelects', 50);

Démo JS Fiddle.

Et enfin (après un certain retard...), une approche étendant le prototype de l'élément HTMLSelectElement afin d'enchaîner la fonction populate(), en tant que méthode, à l'élément du DOM :

HTMLSelectElement.prototype.populate = function (opts) {
    var settings = {};

    settings.min = 0;
    settings.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));
    }
};

document.getElementById('selectElementId').populate({
    'min': 12,
    'max': 40
});

Démo JS Fiddle.

Références :

• node.appendChild().
• document.getElementById().
• element.innerHTML.

Answer 2

La manière la plus concise et intuitive serait :

var selectElement = document.getElementById('ageselect');

for (var age = 12; age <= 100; age++) {
  selectElement.add(new Option(age));
}

Votre âge : Veuillez sélectionner

Vous pouvez également différencier le nom et la valeur ou ajouter des éléments au début de la liste avec des paramètres supplémentaires aux fonctions utilisées :
HTMLSelect​Element​.add(item[, before]);
new Option(text, value, defaultSelected, selected);

Answer 3

Voici:

for ( i = 12; i <= 100; i += 1 ) {
    option = document.createElement( 'option' );
    option.value = option.text = i;
    select.add( option );
}

Démonstration en direct: http://jsfiddle.net/mwPb5/

---

Mettre à jour: Comme vous voulez réutiliser ce code, voici la fonction pour cela:

function initDropdownList( id, min, max ) {
    var select, i, option;

    select = document.getElementById( id );
    for ( i = min; i <= max; i += 1 ) {
        option = document.createElement( 'option' );
        option.value = option.text = i;
        select.add( option );
    }
}

Usage:

initDropdownList( 'mainSelect', 12, 100 );

Démonstration en direct: http://jsfiddle.net/mwPb5/1/

Answer 4

Je ne recommande pas de faire des manipulations DOM à l'intérieur d'une boucle - cela peut devenir coûteux dans de grands ensembles de données. Au lieu de cela, je ferais quelque chose comme ceci :

var elMainSelect = document.getElementById('mainSelect');

function selectOptionsCreate() {
  var frag = document.createDocumentFragment(),
    elOption;
  for (var i=12; i<101; ++i) {
    elOption = frag.appendChild(document.createElement('option'));
    elOption.text = i;
  }
  elMainSelect.appendChild(frag);
}

Vous pouvez en savoir plus sur DocumentFragment sur MDN, mais voici l'idée principale :

Il est utilisé comme une version allégée de Document pour stocker un segment de une structure de document composée de nœuds tout comme un document standard. La différence clé est que parce que le fragment de document ne fait pas partie de la structure réelle du DOM, les modifications apportées au fragment n'affectent pas le document, ne provoquent pas de réorganisation, ou n'entraînent aucun impact sur les performances qui peuvent se produire lorsque des modifications sont apportées.

Answer 5

La seule chose que j'éviterais de faire est d'effectuer des opérations sur le DOM dans une boucle pour éviter les rendus répétés de la page.

var firstSelect = document.getElementById('id du premier élément select'),
    secondSelect = document.getElementById('id du deuxième élément select'),
    optionsHTML = [],
    i = 12;

for (; i < 100; i += 1) {
  optionsHTML.push("Âge" + i + "";
}

firstSelect.innerHTML = optionsHTML.join('\n');
secondSelect.innerHTML = optionsHTML.join('\n');

Édition : j'ai supprimé la fonction pour montrer comment vous pouvez simplement assigner le html que vous avez construit à un autre élément select - évitant ainsi la boucle inutile en répétant l'appel de la fonction.