Ajouter des options à sélectionner avec javascript

Question

Je veux que ce javascript crée des options de 12 à 100 dans une sélection avec id="mainSelect", car je ne veux pas créer toutes les balises d'option manuellement. Pouvez-vous me donner quelques indications ? Merci

function selectOptionCreate() {

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

  return line;
}

Answer 1

Vous pouvez y parvenir avec un simple for boucle :

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émonstration de JS Fiddle .

JS Perf comparaison de la mine et du Réponse de Sime Vidas Je l'ai exécuté parce que je trouvais que le sien semblait un peu plus compréhensible/intuitif que le mien et je me demandais comment cela se traduirait dans la mise en œuvre. Selon Chromium 14/Ubuntu 11.04, le mien est un peu plus rapide, mais d'autres navigateurs/plateformes sont susceptibles d'avoir des résultats différents.

---

Modifié en réponse au commentaire du PO :

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

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

        select = document.getElementById(target);

        for (var i = min; i<=max; i++){
            var opt = document.createElement('option');
            opt.value = i;
            opt.innerHTML = i;
            select.appendChild(opt);
        }
    }
}
// calling the function with all three values:
populateSelect('selectElementId',12,100);

// calling the function with only the 'id' ('min' and 'max' are set to defaults):
populateSelect('anotherSelect');

// calling the function with the 'id' and the 'min' (the 'max' is set to default):
populateSelect('moreSelects', 50);

Démonstration de JS Fiddle .

Et, enfin (après tout un retard...), une approche étendant le prototype du HTMLSelectElement afin d'enchaîner les populate() en tant que méthode, au nœud 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émonstration de 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));
}

Your age: <select id="ageselect"><option value="">Please select</option></select>

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 :
HTMLSelectElement.add (article[, avant]) ;
nouvelle option (texte, valeur, defaultSelected, selected) ;

Answer 3

Voilà :

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/

---

Mise à jour : Puisque vous voulez réutiliser ce code, voici la fonction correspondante :

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

Utilisation :

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 les grands ensembles de données. A la place, 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);
}

Pour en savoir plus sur le DocumentFragment, consultez la page MDN mais voici l'essentiel :

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 essentielle est que le fragment de document ne fait pas partie de la structure du DOM. la structure réelle du DOM, les modifications apportées au fragment n'affectent pas n'affectent pas le document, ne provoquent pas de reflux ou n'ont pas d'impact sur les se produire lorsque des modifications sont apportées.

Answer 5

La seule chose que j'éviterais, c'est d'effectuer des opérations DOM en boucle afin d'éviter les re-rendus répétés de la page.

var firstSelect = document.getElementById('first select elements id'),
    secondSelect = document.getElementById('second select elements id'),
    optionsHTML = [],
    i = 12;

for (; i < 100; i += 1) {
  optionsHTML.push("<option value=\"Age" + i + "\">Age" + i + "</option>";
}

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

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